molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-03-07 06:24:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.0.6

Browse Source 
1.修复行距带来的垂直不居中问题
2.优化操作条组件，新增多种样式
3.优化背景颜色（某些组件的默认背景调整,移除一些important）
4.更新动画扩展5.优化按钮,标签,头像的大小
This commit is contained in:
Weilanwl
2019-02-09 16:57:35 +08:00
parent dbe5f7c892
commit 122f46b8d4
70 changed files with 2812 additions and 1791 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
demo/app.json
View File

@@ -6,7 +6,6 @@
"pages/basics/button/design",
"pages/basics/tag/tag",
"pages/basics/avatar/avatar",
"pages/basics/image/image",
"pages/basics/progress/progress",
"pages/basics/shadow/shadow",
"pages/basics/background/background",
@@ -27,7 +26,14 @@
"pages/plugin/home/home",
"pages/plugin/indexes/indexes",
"pages/plugin/gradual/gradual",
"pages/plugin/animation/animation"
"pages/plugin/animation/animation",
"pages/auth/auth",
"pages/about/about/about",
"pages/about/log/log",
"pages/about/test/list",
"pages/about/test/filter",
"pages/about/home/home",
"custom-tab-bar/index"
],
"window": {
"navigationBarBackgroundColor": "#39b54a",
@@ -35,8 +41,9 @@
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
},
"component": true,
"usingComponents": {},
"tabBar": {
"custom": true,
"color": "#aaa",
"selectedColor": "#39b54a",
"borderStyle": "black",
@@ -59,6 +66,12 @@
"iconPath": "/images/tabbar/plugin.png",
"selectedIconPath": "/images/tabbar/plugin_cur.png",
"text": "扩展"
},
{
"pagePath": "pages/about/home/home",
"iconPath": "/images/tabbar/about.png",
"selectedIconPath": "/images/tabbar/about_cur.png",
"text": "关于"
}
]
}

1
demo/app.wxss
View File

@@ -9,7 +9,6 @@
}
.nav-li {
color: #666;
padding: 30rpx;
border-radius: 12rpx;
width: 45%;

1765
demo/colorui.wxss
View File

File diff suppressed because it is too large Load Diff

43
demo/custom-tab-bar/index.js Normal file
View File

@@ -0,0 +1,43 @@
Component({
options: {
addGlobalClass: true,
},
data: {
selected: 0,
list: [{
pagePath: "/pages/basics/home/home",
iconPath: "/images/tabbar/basics.png",
selectedIconPath: "/images/tabbar/basics_cur.png",
text: "基础"
},
{
pagePath: "/pages/component/home/home",
iconPath: "/images/tabbar/component.png",
selectedIconPath: "/images/tabbar/component_cur.png",
text: "组件"
},
{
pagePath: "/pages/plugin/home/home",
iconPath: "/images/tabbar/plugin.png",
selectedIconPath: "/images/tabbar/plugin_cur.png",
text: "扩展"
},
{
pagePath: "/pages/about/home/home",
iconPath: "/images/tabbar/about.png",
selectedIconPath: "/images/tabbar/about_cur.png",
text: "关于"
}
]
},
methods: {
switchTab(e) {
const url = e.currentTarget.dataset.path
wx.switchTab({
url
})
}
},
pageLifetimes: {
},
})

3
demo/custom-tab-bar/index.json Normal file
View File

@@ -0,0 +1,3 @@
{
"component": true
}

8
demo/custom-tab-bar/index.wxml Normal file
View File

@@ -0,0 +1,8 @@
<view class="cu-bar tabbar bg-white shadow">
<view class="action" wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<view class='icon-cu-image'>
<image src='{{selected === index ? item.selectedIconPath : item.iconPath}}' class='{{selected === index ? "animation" : "animation"}}'></image>
</view>
<view class='{{selected === index ? "text-green" : "text-gray"}}'>{{item.text}}</view>
</view>
</view>

0
demo/custom-tab-bar/index.wxss Normal file
View File

1
demo/icon.wxss
View File

@@ -27,6 +27,7 @@
font-style: normal;
}
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831'); /* IE9*/
src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831#iefix') format('embedded-opentype'), /* IE6-IE8 */

72
demo/pages/about/about/about.js
View File

@@ -1,66 +1,14 @@
// pages/about/about/about.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
onLoad: function () { },
pageBack() {
wx.navigateBack({
delta: 1
});
}
})
});

4
demo/pages/about/about/about.json
View File

@@ -1,3 +1 @@
{
"usingComponents": {}
}
{}

20
demo/pages/about/about/about.wxml
View File

@@ -1,2 +1,18 @@
<!--pages/about/about/about.wxml-->
<text>pages/about/about/about.wxml</text>
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 关于
</navigator>
</view>
</view>
<view class='margin-xl bg-white padding-xl radius shadow-lg'>
<view class='text-center margin-bottom text-lg text-grey'>关于ColorUI组件库</view>
<view class='text-content'>
<view>Hi！开发者~欢迎使用ColorUI组件库！</view>
<view class='margin-top-sm'>该项目是我个人开发的一款高颜值的微信小程序组件库。这个项目不仅有一些漂亮的基础元素，还有一些实用的组件。扩展中心也会不定期更新一些小程序的解决方案，或者你有一些好的想法可以在GitHub里提交给我，我会加入到扩展里。</view>
<view class='margin-top-sm'>项目是开源的，不收取任何费用，如果这个项目有帮到你，或者你觉得很赞，可以在GitHub里扫描赞赏码支持一下！</view>
<view class='margin-top-sm'>该项目你可以用到除组件库小程序的任何项目。作者我也是花了时间和精力的，我不希望你拷贝一份，做一些修改发布就变成了一个独立的项目，当然！扩展再发布是可以的，但前提是注明一下我这个原作者٩(๑❛ᴗ❛๑)۶</view>
<view class='margin-top-sm'>更多功能敬请期待！</view>
</view>
</view>

28
demo/pages/about/about/about.wxss
View File

@@ -1 +1,27 @@
/* pages/about/about/about.wxss */
.UCenter-bg {
background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
background-size: cover;
height: 700rpx;
display: flex;
justify-content: center;
padding-top: 40rpx;
overflow: hidden;
position: relative;
flex-direction: column;
align-items: center;
color: #fff;
font-weight: 300;
text-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.UCenter-bg text{
opacity: 0.8;
}
.UCenter-bg image {
width: 250rpx;
height: 250rpx;
}
.UCenter-bg .animation-wave {
position: absolute;
bottom: 0;
}

128
demo/pages/about/home/home.js
View File

@@ -1,66 +1,84 @@
// pages/about/home/home.js
Page({
/**
* 页面的初始数据
*/
Component({
data: {
starCount: 0,
forksCount: 0,
visitTotal: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
methods: {
onLoad(options) {
let that = this;
wx.showLoading({
title: '数据加载中',
mask: true,
})
let i = 0;
numDH();
function numDH() {
if (i < 20) {
setTimeout(function() {
that.setData({
visitTotal: i,
forksCount: i,
visitTotal: i
})
i++
numDH();
}, 20)
} else {
that.setData({
starCount: that.coutNum(999),
forksCount: that.coutNum(8888),
visitTotal: that.coutNum(77777)
})
}
}
wx.hideLoading()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
coutNum(e) {
if (e > 1000 && e < 10000) {
e = (e / 1000).toFixed(1) + 'k'
}
if (e > 10000) {
e = (e / 10000).toFixed(1) + 'W'
}
return e
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
CopyLink(e) {
wx.setClipboardData({
data: e.currentTarget.dataset.link,
success: res => {
wx.showToast({
title: '已复制',
duration: 1000,
})
}
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
hideModal(e) {
this.setData({
modalName: null
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
showQrcode() {
wx.previewImage({
urls: ['https://image.weilanwl.com/color2.0/zanCode.jpg'],
current: 'https://image.weilanwl.com/color2.0/zanCode.jpg' // 当前显示图片的http链接
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 3
})
}
}
}
})

4
demo/pages/about/home/home.json
View File

@@ -1,3 +1 @@
{
"usingComponents": {}
}
{}

82
demo/pages/about/home/home.wxml
View File

@@ -1,2 +1,80 @@
<!--pages/about/home/home.wxml-->
<text>pages/about/home/home.wxml</text>
<view class='UCenter-bg'>
<image src='/images/logo.png' class='png' mode='widthFix'></image>
<view class='text-xl'>ColorUI组件库
<text class='text-df'>v2.0</text>
</view>
<view class='margin-top-sm'>
<text>By:文晓港</text>
</view>
<image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-wave'></image>
</view>
<view class='padding flex text-center text-grey bg-white shadow-warp'>
<view class='flex flex-sub flex-direction solid-right'>
<view class="text-xxl text-orange">{{visitTotal}}</view>
<view class="margin-top-sm">
<text class='icon-attentionfill'></text> View</view>
</view>
<view class='flex flex-sub flex-direction solid-right'>
<view class="text-xxl text-blue">{{starCount}}</view>
<view class="margin-top-sm">
<text class='icon-favorfill'></text> Star</view>
</view>
<view class='flex flex-sub flex-direction'>
<view class="text-xxl text-green">{{forksCount}}</view>
<view class="margin-top-sm">
<text class='icon-fork'></text> Fork</view>
</view>
</view>
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
<view class="cu-item arrow">
<view class='content' bindtap='CopyLink' data-link='https://github.com/weilanwl/ColorUI'>
<text class='icon-github text-grey'></text>
<text class='text-grey'>GitHub</text>
</view>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../about/about' hover-class='none'>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>关于ColorUI组件库</text>
</navigator>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../log/log' hover-class='none'>
<text class='icon-formfill text-green'></text>
<text class='text-grey'>日志</text>
</navigator>
</view>
<view class="cu-item arrow">
<view class='content' bindtap="showQrcode">
<text class='icon-appreciatefill text-red'></text>
<text class='text-grey'>赞赏支持</text>
</view>
</view>
<view class="cu-item arrow">
<button class='cu-btn content' open-type='feedback'>
<text class='icon-writefill text-cyan'></text>
<text class='text-grey'>意见反馈</text>
</button>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../test/list' hover-class='none'>
<text class='icon-creativefill text-orange'></text>
<text class='text-grey'>Bug测试</text>
</navigator>
</view>
</view>
<view class="cu-modal {{modalName=='QrcodeModal'?'show':''}}">
<view class="cu-dialog">
<view class="bg-img" style="background-image: url('https://image.weilanwl.com/color2.0/zanCode.jpg');height:544rpx;">
<view class="cu-bar justify-end none-bg text-white">
<view class='action' bindtap='hideModal'>
<text class='icon-close '></text>
</view>
</view>
</view>
<view class="cu-bar">
<view class='justify-center flex-sub' bindtap='SaveQrcode'>保存到相册</view>
</view>
</view>
</view>

40
demo/pages/about/home/home.wxss
View File

@@ -1 +1,39 @@
/* pages/about/home/home.wxss */
page{
padding-bottom: 100rpx;
}
.UCenter-bg {
background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
background-size: cover;
height: 550rpx;
display: flex;
justify-content: center;
padding-top: 40rpx;
overflow: hidden;
position: relative;
flex-direction: column;
align-items: center;
color: #fff;
font-weight: 300;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.UCenter-bg text {
opacity: 0.8;
}
.UCenter-bg image {
width: 200rpx;
height: 200rpx;
}
.UCenter-bg .gif-wave{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
z-index: 99;
mix-blend-mode: screen;
height: 100rpx;
}

72
demo/pages/about/log/log.js
View File

@@ -1,66 +1,14 @@
// pages/about/log/log.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
onLoad: function () { },
pageBack() {
wx.navigateBack({
delta: 1
});
}
})
});

4
demo/pages/about/log/log.json
View File

@@ -1,3 +1 @@
{
"usingComponents": {}
}
{}

101
demo/pages/about/log/log.wxml
View File

@@ -1,2 +1,99 @@
<!--pages/about/log/log.wxml-->
<text>pages/about/log/log.wxml</text>
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> <text class='text-cut'>日志</text>
</navigator>
</view>
</view>
<view class="cu-timeline">
<view class='cu-item text-green'>
<view class="bg-gradual-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.6</view>
<view class="cu-tag line-white">2019/02/09</view>
</view>
<view class='margin-top-sm text-content'>
<view>1.修复行距带来的垂直不居中问题</view>
<view>2.优化操作条组件，新增多种样式</view>
<view>3.优化背景颜色（某些组件的默认背景调整,移除一些important）</view>
<view>4.更新动画扩展</view>
<view>5.优化按钮,标签,头像的大小</view>
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.5</view>
<view class="cu-tag line-white">2019/01/13</view>
</view>
<view class='margin-top-sm text-content'>
<view>1.修复时间线图标显示问题</view>
<view>2.switch、radio、checkbox单位改成px，抛弃小尺寸</view>
<view>3.更新多种窗口组件</view>
<view>4.更新多种动画</view>
<view>5.新增步骤条组件</view>
<view>6.优化列表组件，新增左滑操作</view>
<view>7.优化图标搜索</view>
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.4</view>
<view class="cu-tag line-white">2019/01/10</view>
</view>
<view class='margin-top-sm text-content'>
<view>1.抛弃标签选择器，改成类名选择器</view>
<view>2.动画改成Gif，并新增动画</view>
<view>3.修复一些图标错位问题</view>
<view>4.修复头像文字显示问题</view>
<view>* 建议先备份，再全局替换标签。</view>
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.3</view>
<view class="cu-tag line-white">2019/01/06</view>
</view>
<view class='margin-top-sm text-content'>
<view>1.修复一些单位错误（带输入框的操作条）</view>
<view>2.纠正一些单词拼写...</view>
<view>3.抛弃icon标签，改回text标签的写法</view>
<view>4.抛弃px单位的样式文件</view>
<view>5.优化一些组件的字体大小</view>
<view>6.新增两种加载样式</view>
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.2</view>
<view class="cu-tag line-white">2018/12/24</view>
</view>
<view class='margin-top-sm text-content'>
<view>1.首页增加分享</view>
<view>2.卡片页修复switch开关问题</view>
<view>3.优化首页动画效果（ios表现不佳）</view>
<view>4.表单新增Picker</view>
<view>5.增加赞赏码！请多多支持！</view>
<view>6.新增反馈与Bug测试</view>
<view>7.优化轮播组件</view>
<view>8.优化Bar组件文字描述过多的场景</view>
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.1</view>
<view class="cu-tag line-white">2018/12/20</view>
</view>
<view class='margin-top-sm text-content'>2.0新版本上线</view>
</view>
</view>
</view>

4
demo/pages/about/log/log.wxss
View File

@@ -1 +1,3 @@
/* pages/about/log/log.wxss */
page {
background: #fff;
}

75
demo/pages/about/test/filter.js
View File

@@ -1,66 +1,17 @@
// pages/about/test/filter.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
scrollLeft: 0,
TabCur: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
tabSelect(e) {
console.log(e);
this.setData({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
});

30
demo/pages/about/test/filter.wxml
View File

@@ -1,2 +1,28 @@
<!--pages/about/test/filter.wxml-->
<text>pages/about/test/filter.wxml</text>
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> <text>filter：blur引起的ios花屏测试</text>
</navigator>
</view>
</view>
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</view>
</scroll-view>
<view class='padding margin'>
<view class="shadow-blur bg-red ABox" style='animation: show 1s 1;-webkit-animation: show 1s 1;'>阴影层</view>
</view>
<view class='padding margin'>
<view class="shadow-blur bg-orange ABox">去掉动画</view>
</view>
<view class='padding margin'>
<view class="shadow-blur bg-blue Box" style='animation: show 1s 1;-webkit-animation: show 1s 1;'>去掉after</view>
</view>
<view class='padding margin'>
<view class="shadow-blur bg-green Box">去掉动画和after</view>
</view>

21
demo/pages/about/test/filter.wxss
View File

@@ -1 +1,20 @@
/* pages/about/test/filter.wxss */
.ABox ,.Box {
padding: 30rpx;
border-radius: 12rpx;
position: relative;
z-index: 1;
}
.ABox::after {
content: "";
position: absolute;
z-index: -1;
background-color: inherit;
width: 100%;
height: 100%;
left: 0;
bottom: -20rpx;
border-radius: 10rpx;
opacity: 0.2;
transform: scale(0.9, 0.9);
}

75
demo/pages/about/test/list.js
View File

@@ -1,66 +1,17 @@
// pages/about/test/list.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
scrollLeft: 0,
TabCur: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
tabSelect(e) {
console.log(e);
this.setData({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
});

17
demo/pages/about/test/list.wxml
View File

@@ -1,2 +1,15 @@
<!--pages/about/test/list.wxml-->
<text>pages/about/test/list.wxml</text>
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 测试
</navigator>
</view>
</view>
<view class='padding margin'>
<navigator url='filter' class='bg-grey padding radius'>
<text>filter：blur引起的ios花屏测试</text>
</navigator>
<!-- <navigator url='filter' class='bg-grey padding radius margin-top'>
<text>filter：blur引起的ios花屏测试</text>
</navigator> -->
</view>

2
demo/pages/about/test/list.wxss
View File

@@ -1 +1 @@
/* pages/about/test/list.wxss */
/* miniprogram/pages/about/test/list.wxss */

74
demo/pages/auth/auth.js
View File

@@ -1,66 +1,16 @@
// pages/auth/auth.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
onGetUserInfo: function (e) {
if (!this.logged && e.detail.userInfo) {
app.globalData.userInfo = e.detail.userInfo;
wx.switchTab({
url: '/pages/basics/home/home',
})
}
})
}
});

4
demo/pages/auth/auth.json
View File

@@ -1,3 +1 @@
{
"usingComponents": {}
}
{}

14
demo/pages/auth/auth.wxml
View File

@@ -1,2 +1,12 @@
<!--pages/auth/auth.wxml-->
<text>pages/auth/auth.wxml</text>
<view class='UCenter-bg'>
<image src='/images/logo.png' class='png' mode='widthFix'></image>
<view class='text-xl'>ColorUI组件库
<text class='text-df'>v2.0</text>
</view>
<view class='margin-top-sm'>
<text>By:文晓港</text>
</view>
</view>
<view class='padding-xl'>
<button class='cu-btn bg-green shadow lg block' open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">微信登录</button>
</view>

35
demo/pages/auth/auth.wxss
View File

@@ -1 +1,34 @@
/* pages/auth/auth.wxss */
.UCenter-bg {
background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
background-size: cover;
height: 700rpx;
display: flex;
justify-content: center;
overflow: hidden;
position: relative;
flex-direction: column;
align-items: center;
color: #fff;
font-weight: 300;
text-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.UCenter-bg::after {
content: "";
position: absolute;
width: 100vw;
height: 50vw;
background-color: #f1f1f1;
transform: rotate(-10deg) scale(2,2);
bottom: -60vw;
left: 0;
right: 0;
margin: auto;
}
.UCenter-bg text{
opacity: 0.8;
}
.UCenter-bg image {
width: 250rpx;
height: 250rpx;
}

36
demo/pages/basics/avatar/avatar.wxml
View File

@@ -1,11 +1,11 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 头像
</navigator>
</view>
</view>
<view class="cu-bar">
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>头像形状
</view>
@@ -14,7 +14,7 @@
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class="cu-avatar radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像尺寸
</view>
@@ -26,18 +26,22 @@
<view class="cu-avatar xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
</view>
<view class="padding">
<view class="cu-avatar sm round margin-left bg-red" > orange</view>
<view class="cu-avatar round margin-left bg-red" >orange</view>
<view class="cu-avatar lg round margin-left bg-red" >orange</view>
<view class="cu-avatar xl round margin-left bg-red" >orange</view>
<view class="cu-avatar sm round margin-left bg-red"> A</view>
<view class="cu-avatar round margin-left bg-red">B</view>
<view class="cu-avatar lg round margin-left bg-red">C</view>
<view class="cu-avatar xl round margin-left bg-red">D</view>
</view>
<view class="padding">
<view class="cu-avatar sm round margin-left bg-red" > 蔚蓝</view>
<view class="cu-avatar round margin-left bg-red" >蔚蓝</view>
<view class="cu-avatar lg round margin-left bg-red" >蔚蓝</view>
<view class="cu-avatar xl round margin-left bg-red" >蔚蓝</view>
<view class="cu-avatar sm round margin-left bg-red"> 蔚</view>
<view class="cu-avatar round margin-left bg-red">蓝</view>
<view class="cu-avatar lg round margin-left bg-red">
<text>wl</text>
</view>
<view class="cu-avatar xl round margin-left bg-red">
<text class='avatar-text'>网络</text>
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>内嵌文字(图标)
</view>
@@ -51,17 +55,17 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像颜色
</view>
</view>
<view class="padding-sm">
<view class="cu-avatar round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key>
<text>{{item.name}}</text>
<text class='avatar-text'>{{item.name}}</text>
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像组
</view>
@@ -72,7 +76,7 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像标签
</view>

26
demo/pages/basics/background/background.wxml
View File

@@ -1,12 +1,12 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 背景颜色
</navigator>
</view>
</view>
<view class="cu-bar solid-bottom">
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>深色背景
</view>
@@ -20,7 +20,7 @@
</view>
</view>
<view class="cu-bar solid-bottom">
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>淡色背景
</view>
@@ -33,50 +33,50 @@
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>渐变背景
</view>
</view>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class='gradual-red padding radius text-center shadow-blur'>
<view class='bg-gradual-red padding radius text-center shadow-blur'>
<view class="text-lg">魅红</view>
<view class='margin-top-sm text-Abc'>#f43f3b - #ec008c</view>
</view>
</view>
<view class='padding-sm'>
<view class='gradual-orange padding radius text-center shadow-blur'>
<view class='bg-gradual-orange padding radius text-center shadow-blur'>
<view class="text-lg">鎏金</view>
<view class='margin-top-sm text-Abc'>#ff9700 - #ed1c24</view>
</view>
</view>
<view class='padding-sm'>
<view class='gradual-green padding radius text-center shadow-blur'>
<view class='bg-gradual-green padding radius text-center shadow-blur'>
<view class="text-lg">翠柳</view>
<view class='margin-top-sm text-Abc'>#39b54a - #8dc63f</view>
</view>
</view>
<view class='padding-sm'>
<view class='gradual-blue padding radius text-center shadow-blur'>
<view class='bg-gradual-blue padding radius text-center shadow-blur'>
<view class="text-lg">靛青</view>
<view class='margin-top-sm text-Abc'>#0081ff - #1cbbb4</view>
</view>
</view>
<view class='padding-sm'>
<view class='gradual-purple padding radius text-center shadow-blur'>
<view class='bg-gradual-purple padding radius text-center shadow-blur'>
<view class="text-lg">惑紫</view>
<view class='margin-top-sm text-Abc'>#9000ff - #5e00ff</view>
</view>
</view>
<view class='padding-sm'>
<view class='gradual-pink padding radius text-center shadow-blur'>
<view class='bg-gradual-pink padding radius text-center shadow-blur'>
<view class="text-lg">霞彩</view>
<view class='margin-top-sm text-Abc'>#ec008c - #6739b6</view>
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>图片背景
</view>
@@ -91,7 +91,7 @@
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>视频背景
</view>
@@ -107,7 +107,7 @@
</cover-view>
</cover-view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>透明背景(文字层)
</view>

24
demo/pages/basics/button/button.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 按钮
</navigator>
@@ -9,34 +9,34 @@
</navigator>
</view>
</view>
<view class="cu-bar">
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>按钮形状
</view>
</view>
<view class="padding flex flex-wrap justify-between align-center">
<view class="padding flex flex-wrap justify-between align-center bg-white">
<button class='cu-btn'>默认</button>
<button class='cu-btn round'>圆角</button>
<button class='cu-btn icon'>
<text class='icon-emojifill'></text>
</button>
</view>
<view class="cu-bar margin-top ">
<view class="cu-bar margin-top bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>按钮尺寸
</view>
</view>
<view class="padding flex flex-wrap justify-between align-center">
<view class="padding flex flex-wrap justify-between align-center bg-white">
<button class='cu-btn round sm'>小尺寸</button>
<button class='cu-btn round'>默认</button>
<button class='cu-btn round lg'>大尺寸</button>
</view>
<view class="cu-bar margin-top ">
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>按钮颜色
</view>
<view class='action'>
<text class='text-df'>阴影</text>
<text class='text-df margin-right-sm'>阴影</text>
<switch class='sm' bindchange='SetShadow'></switch>
</view>
</view>
@@ -45,7 +45,7 @@
<button class='cu-btn round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
</view>
</view>
<view class="cu-bar margin-top ">
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>镂空按钮
</view>
@@ -63,11 +63,11 @@
</view>
</view>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}">
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
<button class='cu-btn round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
</view>
</view>
<view class="cu-bar margin-top ">
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>块状按钮
</view>
@@ -76,7 +76,7 @@
<button class='cu-btn bg-grey lg'>玄灰</button>
<button class='cu-btn bg-red margin-tb-sm lg'>嫣红</button>
</view>
<view class="cu-bar margin-top ">
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>无效状态
</view>
@@ -85,7 +85,7 @@
<button class='cu-btn block bg-blue margin-tb-sm lg' disabled type=''>无效状态</button>
<button class='cu-btn block line-blue margin-tb-sm lg' disabled>无效状态</button>
</view>
<view class="cu-bar margin-top ">
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>按钮加图标
</view>

1
demo/pages/basics/button/button.wxss
View File

@@ -1 +0,0 @@

4
demo/pages/basics/button/design.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 按钮 / 设计
</navigator>
@@ -9,7 +9,7 @@
<view class="box bg-white text-center radius {{block?'flex-direction':''}}">
<button class='cu-btn {{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}'>我是一个按钮</button>
</view>
<view class='padding text-center'> class="<text wx:if="{{color}}">{{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}</text>" </view>
<view class='padding text-center'> class="cu-btn<text wx:if="{{color}}"> {{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}</text>" </view>
</view>
<view class="cu-form-group margin-top" bindtap="showModal" data-target="ColorModal">

101
demo/pages/basics/home/home.js
View File

@@ -1,18 +1,81 @@
Page({
Component({
data: {
elements: [
{ title: '布局', name: 'layout', color: 'cyan', icon: 'newsfill' },
{ title: '背景', name: 'background', color: 'blue', icon: 'colorlens' },
{ title: '文本', name: 'text', color: 'purple', icon: 'font' },
{ title: '图标 ', name: 'icon', color: 'mauve', icon: 'icon' },
{ title: '按钮', name: 'button', color: 'pink', icon: 'btn' },
{ title: '标签', name: 'tag', color: 'brown', icon: 'tagfill' },
{ title: '头像', name: 'avatar', color: 'red', icon: 'myfill' },
{ title: '进度条', name: 'progress', color: 'orange', icon: 'icloading' },
{ title: '边框阴影', name: 'shadow', color: 'olive', icon: 'copy' },
{ title: '加载', name: 'loading', color: 'green', icon: 'loading2' },
elements: [{
title: '布局',
name: 'layout',
color: 'cyan',
icon: 'newsfill'
},
{
title: '背景',
name: 'background',
color: 'blue',
icon: 'colorlens'
},
{
title: '文本',
name: 'text',
color: 'purple',
icon: 'font'
},
{
title: '图标 ',
name: 'icon',
color: 'mauve',
icon: 'icon'
},
{
title: '按钮',
name: 'button',
color: 'pink',
icon: 'btn'
},
{
title: '标签',
name: 'tag',
color: 'brown',
icon: 'tagfill'
},
{
title: '头像',
name: 'avatar',
color: 'red',
icon: 'myfill'
},
{
title: '进度条',
name: 'progress',
color: 'orange',
icon: 'icloading'
},
{
title: '边框阴影',
name: 'shadow',
color: 'olive',
icon: 'copy'
},
{
title: '加载',
name: 'loading',
color: 'green',
icon: 'loading2'
},
],
},
methods: {
onLoad() {
let that = this;
// 获取用户信息
wx.getSetting({
success: res => {
if (!res.authSetting['scope.userInfo']) {
wx.redirectTo({
url: '/pages/auth/auth'
})
}
}
})
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
@@ -23,11 +86,21 @@ Page({
modalName: null
})
},
onShareAppMessage(){
onShareAppMessage() {
return {
title: 'ColorUI-高颜值的小程序UI组件库',
imageUrl:'https://image.weilanwl.com/color2.0/share2215.jpg',
imageUrl: 'https://image.weilanwl.com/color2.0/share2215.jpg',
path: '/pages/basics/home/home'
}
},
},
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
}
})

4
demo/pages/basics/home/home.wxss
View File

@@ -1,3 +1,3 @@
.weui-tabbar{
left: 0px !important;
page{
padding-bottom: 100rpx;
}

4
demo/pages/basics/icon/icon.wxml
View File

@@ -1,11 +1,11 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 图标
</navigator>
</view>
</view>
<view class="cu-bar search fixed" style="top:{{CustomBar}}px">
<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px">
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'></input>

66
demo/pages/basics/image/image.js
View File

@@ -1,66 +0,0 @@
// pages/basics/image/image.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

3
demo/pages/basics/image/image.json
View File

@@ -1,3 +0,0 @@
{
"usingComponents": {}
}

2
demo/pages/basics/image/image.wxml
View File

@@ -1,2 +0,0 @@
<!--pages/basics/image/image.wxml-->
<text>pages/basics/image/image.wxml</text>

1
demo/pages/basics/image/image.wxss
View File

@@ -1 +0,0 @@
/* pages/basics/image/image.wxss */

18
demo/pages/basics/layout/layout.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 布局
</navigator>
@@ -11,7 +11,7 @@
</view>
</scroll-view>
<block wx:if="{{TabCur==0}}">
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>固定尺寸
</view>
@@ -27,7 +27,7 @@
<view class='basis-xl bg-grey margin-xs padding-sm radius'>xl(80%)</view>
</view>
</view>
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>比例布局
</view>
@@ -47,7 +47,7 @@
<view class='flex-treble bg-grey padding-sm margin-xs radius'>3</view>
</view>
</view>
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>水平对齐(justify)
</view>
@@ -74,7 +74,7 @@
<view class='bg-grey padding-sm margin-xs radius'>around</view>
</view>
</view>
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>垂直对齐(align)
</view>
@@ -95,7 +95,7 @@
</view>
</block>
<block wx:if="{{TabCur==1}}">
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等分列
</view>
@@ -106,7 +106,7 @@
<view class="{{index%2==0?'bg-cyan':'bg-blue'}} padding" wx:for="{{(index+1)*2}}" wx:key>{{index+1}}</view>
</view>
</view>
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等高
</view>
@@ -119,7 +119,7 @@
</view>
</block>
<block wx:if="{{TabCur==2}}">
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>浮动
</view>
@@ -132,7 +132,7 @@
</view>
</block>
<block wx:if="{{TabCur==3}}">
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>内外边距
</view>

12
demo/pages/basics/loading/loading.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 加载
</navigator>
@@ -8,13 +8,13 @@
</view>
</view>
</view>
<view class="cu-bar">
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>背景
</view>
</view>
<view class="cu-load bg-blue {{!isLoad?'loading':'over'}}"></view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>加载状态
</view>
@@ -23,14 +23,14 @@
</view>
</view>
<view class="cu-load bg-grey {{!isLoad?'loading':'over'}}"></view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>加载错误
</view>
</view>
<view class="cu-load bg-red erro"></view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>弹框加载
</view>
@@ -45,7 +45,7 @@
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<view class='gray-text'>加载中...</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条加载
</view>

14
demo/pages/basics/progress/progress.wxml
View File

@@ -1,11 +1,11 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 进度条
</navigator>
</view>
</view>
<view class="cu-bar solid-bottom">
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>进度条形状
</view>
@@ -21,7 +21,7 @@
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条尺寸
</view>
@@ -38,7 +38,7 @@
</view>
</view>
<view class="cu-bar solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<view class="cu-bar bg-white solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<view class='action'>
<text class='icon-title text-blue'></text>进度条颜色
</view>
@@ -53,7 +53,7 @@
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条条纹
</view>
@@ -67,7 +67,7 @@
<view class='bg-black' style="width:{{loading?'40%':''}};"></view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条比例
</view>
@@ -79,7 +79,7 @@
<view class='bg-cyan' style="width:{{loading?'25%':''}};">25%</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条布局
</view>

6
demo/pages/basics/shadow/shadow.wxml
View File

@@ -1,11 +1,11 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 边框阴影
</navigator>
</view>
</view>
<view class="cu-bar solid-bottom">
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>边框
</view>
@@ -20,7 +20,7 @@
<view class='padding solid{{size?"s":""}}-bottom margin-top'>下</view>
<view class='padding solid{{size?"s":""}}-left margin-top'>左</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>阴影
</view>

18
demo/pages/basics/tag/tag.wxml
View File

@@ -1,32 +1,32 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 标签
</navigator>
</view>
</view>
<view class="cu-bar">
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>标签形状
</view>
</view>
<view class="padding">
<view class="padding bg-white solid-bottom">
<view class='cu-tag'>默认</view>
<view class='cu-tag round'>椭圆</view>
<view class='cu-tag radius'>圆角</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>标签尺寸
</view>
</view>
<view class="padding">
<view class="padding bg-white">
<view class='cu-tag radius sm'>小尺寸</view>
<view class='cu-tag radius'>普通尺寸</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>标签颜色
</view>
@@ -39,7 +39,7 @@
<view class='cu-tag bg-{{item.name}} light'>{{item.title}}</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>镂空标签
</view>
@@ -49,7 +49,7 @@
<view class='cu-tag line-{{item.name}}'>{{item.title}}</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>胶囊样式
</view>
@@ -96,7 +96,7 @@
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>数字标签
</view>

12
demo/pages/basics/text/text.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 文本
</navigator>
@@ -8,7 +8,7 @@
</view>
</view>
</view>
<view class="cu-bar solid-bottom">
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>文字大小
</view>
@@ -85,7 +85,7 @@
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字颜色
</view>
@@ -97,7 +97,7 @@
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字截断
</view>
@@ -105,7 +105,7 @@
<view class='padding bg-white'>
<view class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字对齐
</view>
@@ -115,7 +115,7 @@
<view class='text-center padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class='text-right padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>特殊文字
</view>

461
demo/pages/component/bar/bar.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text>
<text>操作条</text>
@@ -7,70 +7,308 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-back text-gray'></text>
<text>返回</text>
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-green'></text>
<text>案例</text>
<text>底部操作条</text>
</view>
</view>
<view class='box'>
<view class="cu-bar tabbar bg-white">
<view class="action">
<view class='icon-cu-image'>
<image src='/images/tabbar/basics_cur.png'></image>
</view>
<view class='text-green'>元素</view>
</view>
<view class="action">
<view class='icon-cu-image'>
<image src='/images/tabbar/component.png'></image>
</view>
<view class='text-gray'>组件</view>
</view>
<view class="action">
<view class='icon-cu-image'>
<image src='/images/tabbar/plugin.png'></image>
<view class='cu-tag badge'>99</view>
</view>
<view class='text-gray'>扩展</view>
</view>
<view class="action">
<view class='icon-cu-image'>
<image src='/images/tabbar/about.png'></image>
<view class='cu-tag badge'></view>
</view>
<view class='text-gray'>关于</view>
</view>
</view>
<view class="cu-bar tabbar margin-bottom-xl bg-black">
<view class="action text-orange">
<view class='icon-homefill'></view> 首页
</view>
<view class="action text-gray">
<view class='icon-similar'></view> 分类
</view>
<view class="action text-gray">
<view class='icon-recharge'></view>
积分
</view>
<view class="action text-gray">
<view class='icon-cart'>
<view class='cu-tag badge'>99</view>
</view>
购物车
</view>
<view class="action text-gray">
<view class='icon-my'>
<view class='cu-tag badge'></view>
</view>
我的
</view>
</view>
<view class="cu-bar tabbar margin-bottom-xl bg-white">
<view class="action text-green">
<view class='icon-homefill'></view> 首页
</view>
<view class="action text-gray">
<view class='icon-similar'></view> 分类
</view>
<view class="action text-gray add-action">
<button class='cu-btn icon-add bg-green shadow'></button>
发布
</view>
<view class="action text-gray">
<view class='icon-cart'>
<view class='cu-tag badge'>99</view>
</view>
购物车
</view>
<view class="action text-gray">
<view class='icon-my'>
<view class='cu-tag badge'></view>
</view>
我的
</view>
</view>
<view class="cu-bar tabbar bg-black">
<view class="action text-green">
<view class='icon-homefill'></view> 首页
</view>
<view class="action text-gray">
<view class='icon-similar'></view> 分类
</view>
<view class="action text-gray add-action">
<button class='cu-btn icon-add bg-green shadow'></button>
发布
</view>
<view class="action text-gray">
<view class='icon-cart'>
<view class='cu-tag badge'>99</view>
</view>
购物车
</view>
<view class="action text-gray">
<view class='icon-my'>
<view class='cu-tag badge'></view>
</view>
我的
</view>
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type='contact'>
<view class='icon-service text-green'>
<view class='cu-tag badge'></view>
</view>
客服
</button>
<view class="action text-orange">
<view class='icon-favorfill'></view> 已收藏
</view>
<view class="action">
<view class='icon-cart'>
<view class='cu-tag badge'>99</view>
</view>
购物车
</view>
<view class='bg-red submit'>立即订购</view>
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type='contact'>
<view class='icon-service text-green'>
<view class='cu-tag badge'></view>
</view>
客服
</button>
<view class="action">
<view class='icon-cart'>
<view class='cu-tag badge'>99</view>
</view>
购物车
</view>
<view class='bg-orange submit'>加入购物车</view>
<view class='bg-red submit'>立即订购</view>
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type='contact'>
<view class='icon-service text-green'>
<view class='cu-tag badge'></view>
</view>
客服
</button>
<view class="action">
<view class=' icon-shop'></view> 店铺
</view>
<view class="action">
<view class='icon-cart'>
<view class='cu-tag badge'>99</view>
</view>
购物车
</view>
<view class='btn-group'>
<button class='cu-btn bg-red round shadow-blur'>立即订购</button>
</view>
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type='contact'>
<view class='icon-service text-green'>
<view class='cu-tag badge'></view>
</view> 客服
</button>
<view class="action">
<view class='icon-cart'>
<view class='cu-tag badge'>99</view>
</view>
购物车
</view>
<view class='btn-group'>
<button class='cu-btn bg-orange round shadow-blur'>加入购物车</button>
<button class='cu-btn bg-red round shadow-blur'>立即订购</button>
</view>
<view class='action'>
<button class='cu-btn bg-green shadow-blur sm'>添加
<text class='icon-add'></text> </button>
</view>
</view>
<view class="cu-bar margin-top justify-end">
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-close text-red'></text>
<text class='icon-title text-green'></text>
<text>标题操作条</text>
</view>
</view>
<view class='box' wx:if="{{false}}">
<view class="cu-bar justify-center bg-white">
<view class='action border-title'>
<text class='text-xl text-bold'>关于我们</text>
<text class='bg-grey' style='width:2rem'></text>
<!-- 底部样式 last-child选择器-->
</view>
</view>
<view class="cu-bar justify-center bg-white">
<view class='action border-title'>
<text class='text-xl text-bold text-blue'>关于我们</text>
<text class='bg-gradual-blue' style='width:3rem'></text>
</view>
</view>
<view class="cu-bar justify-center bg-white">
<view class='action sub-title'>
<text class='text-xl text-bold text-green'>关于我们</text>
<text class='bg-green' style='width:2rem'></text>
<!-- last-child选择器-->
</view>
</view>
<view class="cu-bar justify-center bg-white">
<view class='action sub-title'>
<text class='text-xl text-bold text-blue'>关于我们</text>
<text class='text-ABC text-blue'>about</text>
<!-- last-child选择器-->
</view>
</view>
</view>
<view class='box'>
<view class="cu-bar bg-white">
<view class='action border-title'>
<text class='text-xl text-bold'>关于我们</text>
<text class='bg-grey' style='width:2rem'></text>
<!-- 底部样式 last-child选择器-->
</view>
</view>
<view class="cu-bar bg-white">
<view class='action border-title'>
<text class='text-xl text-bold text-blue'>关于我们</text>
<text class='bg-gradual-blue' style='width:3rem'></text>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action sub-title'>
<text class='text-xl text-bold text-green'>关于我们</text>
<text class='bg-green'></text>
<!-- last-child选择器-->
</view>
</view>
<view class="cu-bar bg-white">
<view class='action sub-title'>
<text class='text-xl text-bold text-blue'>关于我们</text>
<text class='text-ABC text-blue'>about</text>
<!-- last-child选择器-->
</view>
</view>
<view class="cu-bar bg-white">
<view class='action title-style-3'>
<text class='text-xl text-bold'>关于我们</text>
<text class='text-Abc text-gray self-end margin-left-sm'>about</text>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-green'></text>
<text class='text-xl text-bold'>关于我们</text>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-titles text-green'></text>
<text class='text-xl text-bold'>关于我们</text>
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-green'></text>
<text>顶部操作条</text>
</view>
</view>
<view class='box'>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-back text-gray'></text> 返回
</view>
<view class='content'>
<view class='content text-bold'>
操作条
</view>
</view>
<view class="cu-bar margin-top">
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-homefill text-gray'></text> 首页
</view>
<view class='content'>
<view class='content text-bold'>
鲜亮的高饱和色彩，专注视觉的小程序组件库
</view>
<view class='action'>
<text class='icon-cardboardfill text-grey'></text>
<text class='icon-recordfill text-red'></text>
</view>
</view>
<view class="cu-bar margin-top bg-blue">
</view>
<view class="cu-bar bg-blue">
<view class='action'>
<text class='icon-close'></text> 关闭
</view>
<view class='content'>
<view class='content text-bold'>
海蓝
</view>
</view>
<view class="cu-bar margin-top bg-orange">
<view class='action'>
<text class='icon-back'></text> 返回
</view>
<view class='content'>
操作条
</view>
</view>
<view class="cu-bar margin-top bg-black search">
<view class="cu-bar bg-black search">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
ColorUI
@@ -78,21 +316,27 @@
<view class='action'>
<text class="icon-more"></text>
</view>
</view>
</view>
<view class="cu-bar margin-top bg-red search">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='search-form radius'>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-green'></text>
<text>搜索操作条</text>
</view>
</view>
<view class='box'>
<view class="cu-bar search bg-white">
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class='action'>
<text>广州</text>
<text class="icon-triangledownfill"></text>
<button class='cu-btn bg-green shadow-blur round'>搜索</button>
</view>
</view>
<view class="cu-bar margin-top search">
</view>
<view class="cu-bar search bg-white">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class='search-form round'>
<text class="icon-search"></text>
@@ -102,9 +346,19 @@
<text>广州</text>
<text class="icon-triangledownfill"></text>
</view>
</view>
<view class="cu-bar margin-top bg-cyan search">
</view>
<view class="cu-bar bg-red search">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='search-form radius'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class='action'>
<text>广州</text>
<text class="icon-triangledownfill"></text>
</view>
</view>
<view class="cu-bar bg-cyan search">
<view class='search-form radius'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
@@ -113,115 +367,39 @@
<text class='icon-close'></text>
<text>取消</text>
</view>
</view>
</view>
<view class="cu-bar margin-top search">
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<button class='cu-btn bg-green shadow-blur round'>搜索</button>
<text class='icon-title text-green'></text>
<text>操作条按钮组</text>
</view>
</view>
<view class="cu-bar margin-top btn-group">
<button class='cu-btn bg-green shadow-blur round'>保存</button>
</view>
<view class="cu-bar margin-top btn-group">
<view class='box'>
<view class="cu-bar btn-group">
<button class='cu-btn bg-green shadow-blur round lg'>保存</button>
</view>
<view class="cu-bar margin-top btn-group">
</view>
<view class="cu-bar btn-group">
<button class='cu-btn bg-green shadow-blur'>保存</button>
<button class='cu-btn text-green line-green shadow'>上传</button>
</view>
<view class="cu-bar margin-top btn-group">
</view>
<view class="cu-bar btn-group">
<button class='cu-btn bg-green shadow-blur round'>保存</button>
<button class='cu-btn bg-blue shadow-blur round'>提交</button>
</view>
<view class="cu-bar margin-top shop">
<button class="cu-btn action" open-type='contact'>
<text class='icon-service text-green'>
<view class='cu-tag badge'></view>
</text>
客服
</button>
<view class="action text-orange">
<text class='icon-favorfill'></text> 已收藏
</view>
<view class="action">
<text class='icon-cart'>
<view class='cu-tag badge'>99</view>
</text>
购物车
</view>
<view class='bg-red submit'>立即订购</view>
</view>
<view class="cu-bar margin-top shop">
<button class="cu-btn action" open-type='contact'>
<text class='icon-service text-green'>
<view class='cu-tag badge'></view>
</text>
客服
</button>
<view class="action">
<text class='icon-cart'>
<view class='cu-tag badge'>99</view>
</text>
购物车
</view>
<view class='bg-orange submit'>加入购物车</view>
<view class='bg-red submit'>立即订购</view>
</view>
<view class="cu-bar margin-top shop">
<button class="cu-btn action" open-type='contact'>
<text class='icon-service text-green'>
<view class='cu-tag badge'></view>
</text>
客服
</button>
<view class="action">
<text class=' icon-shop'></text> 店铺
</view>
<view class="action">
<text class='icon-cart'>
<view class='cu-tag badge'>99</view>
</text>
购物车
</view>
<view class='submit'>
<button class='cu-btn bg-red round shadow-blur'>立即订购</button>
</view>
</view>
<view class="cu-bar margin-top shop">
<button class="cu-btn action" open-type='contact'>
<text class='icon-service text-green'>
<view class='cu-tag badge'></view>
</text>
客服
</button>
<view class="action">
<text class='icon-cart'>
<view class='cu-tag badge'>99</view>
</text>
购物车
</view>
<view class='submit'>
<button class='cu-btn bg-orange round shadow-blur'>加入购物车</button>
</view>
<view class='submit'>
<button class='cu-btn bg-red round shadow-blur'>立即订购</button>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-green'></text>
<text>输入操作条</text>
</view>
</view>
<view class="cu-bar margin-top input">
<view class='box'>
<view class="cu-bar input">
<view class='action'>
<text class='icon-sound text-grey'></text>
</view>
@@ -230,9 +408,9 @@
<text class='icon-emojifill text-grey'></text>
</view>
<button class='cu-btn bg-green shadow-blur'>发送</button>
</view>
</view>
<view class="cu-bar margin-top input">
<view class="cu-bar input">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='action'>
<text class='icon-roundaddfill text-grey'></text>
@@ -242,4 +420,5 @@
<text class='icon-emojifill text-grey'></text>
</view>
<button class='cu-btn bg-green shadow-blur'>发送</button>
</view>
</view>

7
demo/pages/component/bar/bar.wxss
View File

@@ -0,0 +1,7 @@
.box {
margin: 20rpx;
}
.box view.cu-bar {
margin-top: 20rpx;
}

8
demo/pages/component/card/card.wxml
View File

@@ -1,11 +1,11 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 卡片
</navigator>
</view>
</view>
<view class="cu-bar solid-bottom">
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-titles text-orange '></text> 案例类卡片
</view>
@@ -38,7 +38,7 @@
</view>
</view>
</view>
<view class="cu-bar solid-bottom {{isCard?'margin-top':''}}">
<view class="cu-bar bg-white solid-bottom {{isCard?'margin-top':''}}">
<view class='action'>
<text class='icon-titles text-orange '></text> 动态类卡片
</view>
@@ -98,7 +98,7 @@
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 文章类卡片
</view>

6
demo/pages/component/chat/chat.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text>
聊天
@@ -10,7 +10,7 @@
<view class="cu-chat">
<view class="cu-item self">
<view class="main">
<view class='content bg-green shadow-blur'>
<view class='content bg-green shadow'>
<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
</view>
</view>
@@ -87,5 +87,5 @@
<view class='action'>
<text class='icon-emojifill text-grey'></text>
</view>
<button class='cu-btn bg-green shadow-blur'>发送</button>
<button class='cu-btn bg-green shadow'>发送</button>
</view>

2
demo/pages/component/form/form.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 表单
</navigator>

12
demo/pages/component/home/home.js
View File

@@ -1,4 +1,4 @@
Page({
Component({
data: {
elements: [
{ title: '操作条', name: 'bar', color: 'purple', icon: 'vipcard' },
@@ -15,4 +15,14 @@ Page({
},
onLoad: function () {
},
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 1
})
}
}
}
})

4
demo/pages/component/home/home.json
View File

@@ -1 +1,3 @@
{}
{
"usingComponents": {}
}

3
demo/pages/component/home/home.wxss
View File

@@ -0,0 +1,3 @@
page{
padding-bottom: 100rpx;
}

10
demo/pages/component/list/list.wxml
View File

@@ -1,11 +1,11 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 列表
</navigator>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 宫格列表
</view>
@@ -49,7 +49,7 @@
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 菜单列表
</view>
@@ -170,7 +170,7 @@
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 消息列表
</view>
@@ -248,7 +248,7 @@
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 列表左滑
</view>

34
demo/pages/component/modal/modal.wxml
View File

@@ -1,12 +1,12 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 模态窗口
</navigator>
</view>
</view>
<view class="cu-bar">
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange '></text> 模态窗口
</view>
@@ -16,7 +16,7 @@
</view>
<view class="cu-modal {{modalName=='Modal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar justify-end">
<view class="cu-bar bg-white justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
@@ -28,7 +28,7 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 底部窗口
</view>
@@ -38,7 +38,7 @@
</view>
<view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar">
<view class="cu-bar bg-white">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
</view>
@@ -48,7 +48,7 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 对话窗口
</view>
@@ -59,7 +59,7 @@
</view>
<view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar justify-end">
<view class="cu-bar bg-white justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
@@ -68,7 +68,7 @@
<view class='padding-xl'>
Modal 内容。
</view>
<view class="cu-bar justify-end">
<view class="cu-bar bg-white justify-end">
<view class='action'>
<button class='cu-btn line-green text-green' bindtap='hideModal'>取消</button>
<button class='cu-btn bg-green margin-left' bindtap='hideModal'>确定</button>
@@ -80,7 +80,7 @@
<view class="cu-modal {{modalName=='DialogModal2'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar justify-end">
<view class="cu-bar bg-white justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
@@ -89,7 +89,7 @@
<view class='padding-xl'>
Modal 内容。
</view>
<view class="cu-bar">
<view class="cu-bar bg-white">
<view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
<text class='icon-moneybag'></text>微信支付</view>
<view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
@@ -98,7 +98,7 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 图片窗口
</view>
@@ -110,20 +110,20 @@
<view class="cu-modal {{modalName=='Image'?'show':''}}">
<view class="cu-dialog">
<view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
<view class="cu-bar justify-end none-bg text-white">
<view class="cu-bar justify-end text-white">
<view class='action' bindtap='hideModal'>
<text class='icon-close '></text>
</view>
</view>
</view>
<view class="cu-bar">
<view class="cu-bar bg-white">
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>我知道了</view>
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 单选窗口
</view>
@@ -147,7 +147,7 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 多选窗口
</view>
@@ -157,7 +157,7 @@
</view>
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<view class="cu-bar">
<view class="cu-bar bg-white">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
</view>
@@ -169,7 +169,7 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 侧边抽屉
</view>

14
demo/pages/component/nav/nav.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 导航栏
</navigator>
@@ -8,7 +8,7 @@
<view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='bg-grey padding margin text-center'>
Tab{{index}}
</view>
<view class="cu-bar solid-bottom">
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-titles text-orange '></text> 默认
</view>
@@ -19,7 +19,7 @@
</view>
</scroll-view>
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 居中
</view>
@@ -30,7 +30,7 @@
</view>
</scroll-view>
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 平分
</view>
@@ -42,7 +42,7 @@
</view>
</view>
</scroll-view>
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 背景
</view>
@@ -52,7 +52,7 @@
Tab{{index}}
</view>
</scroll-view>
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 图标
</view>
@@ -69,7 +69,7 @@
</view>
</scroll-view>
<view class="cu-bar margin-top solid-bottom">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 定位
</view>

8
demo/pages/component/steps/steps.wxml
View File

@@ -1,11 +1,11 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 步骤条
</navigator>
</view>
</view>
<view class="cu-bar solid-bottom">
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 基本用法
</view>
@@ -36,7 +36,7 @@
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange'></text> 数字完成
</view>
@@ -51,7 +51,7 @@
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange'></text> 多级显示
</view>

8
demo/pages/component/swiper/swiper.wxml
View File

@@ -1,11 +1,11 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 轮播图
</navigator>
</view>
</view>
<view class="cu-bar">
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-pink'></text> 全屏限高轮播
</view>
@@ -18,7 +18,7 @@
<image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill'></image>
</swiper-item>
</swiper>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-pink'></text> 卡片式轮播
</view>
@@ -29,7 +29,7 @@
</swiper-item>
</swiper>
<view class="cu-bar margin-top">
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-pink'></text> 堆叠式轮播
</view>

4
demo/pages/component/timeline/timeline.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text>
时间轴
@@ -65,7 +65,7 @@
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round grey sm">5</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">

60
demo/pages/plugin/animation/animation.js
View File

@@ -3,6 +3,62 @@ Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
list: [{
name: 'fade',
color: 'red'
},
});
{
name: 'scale-up',
color: 'orange'
},
{
name: 'scale-down',
color: 'olive'
},
{
name: 'slide-top',
color: 'green'
}, {
name: 'slide-bottom',
color: 'cyan'
},
{
name: 'slide-left',
color: 'blue'
},
{
name: 'slide-right',
color: 'purple'
},
{
name: 'shake',
color: 'mauve'
}
],
toggleDelay: false
},
toggle(e) {
console.log(e);
var anmiaton = e.currentTarget.dataset.class;
var that = this;
that.setData({
animation: anmiaton
})
setTimeout(function() {
that.setData({
animation: ''
})
}, 1000)
},
toggleDelay() {
var that = this;
that.setData({
toggleDelay: true
})
setTimeout(function() {
that.setData({
toggleDelay: false
})
}, 1000)
}
})

44
demo/pages/plugin/animation/animation.wxml
View File

@@ -5,7 +5,47 @@
</navigator>
</view>
</view>
<view class="margin radius gradual-green shadow-blur">
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 默认效果
</view>
</view>
<view class="padding-sm">
<view class='flex flex-wrap justify-around'>
<button class='cu-btn bg-{{item.color}} animation-{{animation==item.name? item.name :""}} margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name}}' wx:for="{{list}}">{{item.name}}</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 反向动画
</view>
</view>
<view class="padding-sm">
<view class='flex flex-wrap justify-around'>
<button class='cu-btn bg-{{item.color}} animation-{{animation==item.name+"s"? item.name :""}} animation-reverse margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name+"s"}}' wx:for="{{list}}">{{item.name}}</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 延迟执行
</view>
<view class='action'>
<button class='cu-btn bg-cyan shadow' bindtap='toggleDelay'>开始执行</button>
</view>
</view>
<view class="padding-sm">
<view class='flex flex-wrap justify-around'>
<button class=' bg-{{item.color}} cu-btn {{toggleDelay?"animation-slide-bottom":""}} margin-sm basis-sm shadow' style='animation-delay: {{(index+1)*0.1}}s;' wx:for="{{list}}">0.{{index+1}}s</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> Gif动画
</view>
</view>
<view class="margin radius bg-gradual-green shadow-blur">
<image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-black response' style='height:100rpx'></image>
</view>
<view class="margin flex">
@@ -17,7 +57,7 @@
</view>
</view>
<view class="margin flex">
<view class='gradual-blue flex-sub margin-right radius shadow-lg'>
<view class='bg-gradual-blue flex-sub margin-right radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/rhomb-black.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
</view>
<view class='bg-white flex-sub radius shadow-lg'>

171
demo/pages/plugin/animation/animation.wxss
View File

@@ -9,3 +9,174 @@ image[class*="gif-"]{
.gif-white{
mix-blend-mode: multiply;
}
[class*=animation-] {
animation-duration: .5s;
animation-timing-function: ease-out;
animation-fill-mode: both
}
.animation-fade {
animation-name: fade;
animation-duration: .8s;
animation-timing-function: linear
}
.animation-scale-up {
animation-name: scale-up
}
.animation-scale-down {
animation-name: scale-down
}
.animation-slide-top {
animation-name: slide-top
}
.animation-slide-bottom {
animation-name: slide-bottom
}
.animation-slide-left {
animation-name: slide-left
}
.animation-slide-right {
animation-name: slide-right
}
.animation-shake {
animation-name: shake
}
.animation-reverse {
animation-direction: reverse
}
@keyframes fade {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes scale-up {
0% {
opacity: 0;
transform: scale(.2)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes scale-down {
0% {
opacity: 0;
transform: scale(1.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes slide-top {
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes slide-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0)
}
10% {
transform: translateX(-9px)
}
20% {
transform: translateX(8px)
}
30% {
transform: translateX(-7px)
}
40% {
transform: translateX(6px)
}
50% {
transform: translateX(-5px)
}
60% {
transform: translateX(4px)
}
70% {
transform: translateX(-3px)
}
80% {
transform: translateX(2px)
}
90% {
transform: translateX(-1px)
}
}
@keyframes slide-left {
0% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slide-right {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}

2
demo/pages/plugin/gradual/gradual.wxml
View File

@@ -1,5 +1,5 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-bar fixed bg-gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 渐变
</navigator>

15
demo/pages/plugin/home/home.js
View File

@@ -1,5 +1,5 @@
const app = getApp();
Page({
Component({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
@@ -15,10 +15,21 @@ Page({
}
]
},
methods: {
toChild(e) {
wx.navigateTo({
url: e.currentTarget.dataset.url
})
},
},
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 2
})
}
}
}
});

4
demo/pages/plugin/home/home.wxss
View File

@@ -1,4 +1,6 @@
page{
padding-bottom: 100rpx;
}
.cu-bar .content image{
height: 60rpx;
width: 240rpx;

4
demo/pages/plugin/indexes/indexes.wxml
View File

@@ -5,13 +5,13 @@
</navigator>
</view>
</view>
<view class="cu-bar search fixed" style="top:{{CustomBar}}px;">
<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px;">
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
</view>
<view class='action'>
<button class='cu-btn gradual-green shadow-blur round'>搜索</button>
<button class='cu-btn bg-gradual-green shadow-blur round'>搜索</button>
</view>
</view>
<scroll-view scroll-y class="indexes" scroll-into-view="indexes-{{listCurID}}" style='height:calc(100vh - {{CustomBar}}px - 50px)' scroll-with-animation="true" enable-back-to-top="true">

32
demo/project.config.json
View File

@@ -11,7 +11,7 @@
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "2.4.1",
"libVersion": "2.5.2",
"appid": "wxfd5241d66a07713f",
"projectname": "ColorUI2.0-test",
"debugOptions": {
@@ -193,6 +193,36 @@
"name": "3.2 扩展-动画",
"pathName": "pages/plugin/animation/animation",
"query": ""
},
{
"id": -1,
"name": "-----关于-首页-----",
"pathName": "pages/about/home/home",
"query": ""
},
{
"id": -1,
"name": "4.1 关于",
"pathName": "pages/about/about/about",
"query": ""
},
{
"id": -1,
"name": "4.2 关于-日志",
"pathName": "pages/about/log/log",
"query": ""
},
{
"id": 28,
"name": "4.3 测试列表",
"pathName": "pages/about/test/list",
"query": ""
},
{
"id": -1,
"name": "4.3 --- filter：blur引起的ios花屏测试",
"pathName": "pages/about/test/filter",
"query": ""
}
]
}