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

v2.0.5

Browse Source 
1.修复时间线图标显示问题
2.switch、radio、checkbox单位改成px，抛弃小尺寸
3.更新多种窗口组件
4.更新多种动画
5.新增步骤条组件
6.优化列表组件，新增右滑操作
7.优化图标搜索
This commit is contained in:
Weilanwl
2019-01-13 23:29:19 +08:00
parent 523eaba3c6
commit 8af7413e6e
50 changed files with 2704 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,11 +86,7 @@
<view class="cu-form-group margin-top">
<view class='title'>开关选择</view>
<switch class='sm'></switch>
</view>
<view class="cu-form-group">
<view class='title'>大号开关</view>
<switch class=''></switch>
<switch></switch>
</view>
<view class="cu-form-group">
<view class='title'>定义颜色</view>
@@ -109,10 +105,6 @@
<view class='title'>单选操作(radio)</view>
<radio checked></radio>
</view>
<view class="cu-form-group">
<view class='title'>定义尺寸</view>
<radio class='sm'></radio>
</view>
<view class="cu-form-group">
<view class='title'>定义样式</view>
<radio class='radio'></radio>
@@ -130,10 +122,6 @@
<view class='title'>复选选操作(checkbox)</view>
<checkbox></checkbox>
</view>
<view class="cu-form-group">
<view class='title'>定义尺寸</view>
<checkbox class='sm' checked></checkbox>
</view>
<view class="cu-form-group">
<view class='title'>定义形状</view>
<checkbox class='round' checked></checkbox>

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

@@ -8,8 +8,9 @@ Page({
{ title: '表单', name: 'form', color: 'red', icon: 'formfill' },
{ title: '时间轴', name: 'timeline', color: 'orange', icon: 'timefill' },
{ title: '聊天', name: 'chat', color: 'green', icon: 'messagefill' },
{ title: '轮播', name: 'swiper', color: 'olive', icon: 'album'},
{ title: '轮播', name: 'swiper', color: 'olive', icon: 'album' },
{ title: '模态框', name: 'modal', color: 'grey', icon: 'squarecheckfill' },
{ title: '步骤条', name: 'steps', color: 'cyan', icon: 'roundcheckfill' },
],
},
onLoad: function () {

121
demo/pages/component/list/list.js
View File

@@ -3,11 +3,128 @@ Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
iconList: [{
icon: 'cardboardfill',
color: 'red',
badge: 120,
name: 'VR'
}, {
icon: 'recordfill',
color: 'orange',
badge: 1,
name: '录像'
}, {
icon: 'picfill',
color: 'yellow',
badge: 0,
name: '图像'
}, {
icon: 'noticefill',
color: 'olive',
badge: 22,
name: '通知'
}, {
icon: 'upstagefill',
color: 'cyan',
badge: 0,
name: '排行榜'
}, {
icon: 'clothesfill',
color: 'blue',
badge: 0,
name: '皮肤'
}, {
icon: 'discoverfill',
color: 'purple',
badge: 0,
name: '发现'
}, {
icon: 'questionfill',
color: 'mauve',
badge: 0,
name: '帮助'
}, {
icon: 'commandfill',
color: 'purple',
badge: 0,
name: '问答'
}, {
icon: 'brandfill',
color: 'mauve',
badge: 0,
name: '版权'
}],
gridCol:3,
skin: false
},
switchSex: function(e) {
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
gridchange: function (e) {
this.setData({
gridCol: e.detail.value
});
},
gridswitch: function (e) {
this.setData({
gridBorder: e.detail.value
});
},
menuBorder: function (e) {
this.setData({
menuBorder: e.detail.value
});
},
menuArrow: function (e) {
this.setData({
menuArrow: e.detail.value
});
},
menuCard: function (e) {
this.setData({
menuCard: e.detail.value
});
},
switchSex: function (e) {
this.setData({
skin: e.detail.value
});
});
},
// ListTouch触摸开始
ListTouchStart(e) {
this.setData({
ListTouchStart: e.touches[0].pageX
})
},
// ListTouch计算方向
ListTouchMove(e) {
this.setData({
ListTouchDirection: e.touches[0].pageX - this.data.ListTouchStart > 0 ? 'right' : 'left'
})
},
// ListTouch计算滚动
ListTouchEnd(e) {
if (this.data.ListTouchDirection =='left'){
this.setData({
modalName: e.currentTarget.dataset.target
})
} else {
this.setData({
modalName: null
})
}
this.setData({
ListTouchDirection: null
})
},
})

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

@@ -5,446 +5,269 @@
</navigator>
</view>
</view>
<view class="page {{skin?' invert ':' '}}">
<view class="cu-list grid col-3">
<view class="cu-item">
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
<view class="cu-tag badge">99+</view>
</text>
<text>通知</text>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</view>
<view class="cu-item">
<text class='icon-servicefill text-pink'></text>
<text>反馈</text>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 宫格列表
</view>
<view class="cu-list grid col-4">
<view class="cu-item">
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
<view class="cu-tag badge">99+</view>
</text>
<text>通知</text>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="gridModal">设置</button>
</view>
<view class="cu-list grid no-border col-4">
<view class="cu-item">
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
<view class="cu-tag badge">99+</view>
</text>
<text>通知</text>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</view>
</view>
<view class="cu-list grid col-5 no-border">
<view class="cu-item">
<text class='icon-cardboardfill text-red'>
<view class="cu-tag badge">99+</view>
</text>
<text>VR</text>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
</text>
<text>通知</text>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</view>
<view class="cu-item">
<text class='icon-commandfill text-purple'></text>
<text>问答</text>
</view>
<view class="cu-item">
<text class='icon-brandfill text-mauve'></text>
<text>版权</text>
</view>
</view>
<view class="cu-list menu no-padding">
<view class="cu-item">
<view class='content'>
<view>
<text class='icon-clothesfill text-blue'></text> 皮肤设置</view>
<view class='text-gray text-sm'>
<text class='icon-infofill'></text> 皮肤需要付费购买</view>
</view>
<view class='action'>
<switch class='switch-sex sm' bindchange="switchSex"></switch>
</view>
</view>
<view class="cu-item">
<view class='content'>
<view>
<text class='icon-musicfill text-red'></text> 声音控制</view>
<view class='text-gray text-sm'>
<text class='icon-infofill'></text> 需要获得系统权限</view>
</view>
<view class='action'>
<switch class='switch-music'></switch>
</view>
</view>
</view>
<view class="cu-list menu menu-avatar inverts">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<view class="cu-tag badge">99+</view>
</view>
<view class='content'>
<view class='text-grey'>文晓港
<view class="cu-tag round bg-orange sm">SVIP</view>
</view>
<view class='text-gray text-sm'>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</view>
</view>
<view class="cu-list menu menu-avatar no-padding">
<view class="cu-item ">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item cur">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);">
<view class="cu-tag badge"></view>
</view>
<view class='content'>
<view>喵星人互动群
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class='text-gray text-sm'>
喵星酱：
<text class='icon-picfill text-orange'></text> 图片传输中...</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</view>
</view>
<view class="cu-list menu">
<view class="cu-item">
<view class='content'>
<text class='icon-circlefill text-grey'></text>
<text class='text-grey'>图标 + 标题</text>
</view>
</view>
<view class="cu-item">
<view class='content'>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>图片 + 标题</text>
</view>
</view>
<view class="cu-item">
<button class='cu-btn content' open-type='contact'>
<text class='icon-btn text-olive'></text>
<text class='text-grey'>Open-type 按钮</text>
</button>
</view>
<view class="cu-item">
<navigator class='content' hover-class='none' url='../list/list' open-type="redirect">
<text class='icon-discoverfill text-orange'></text>
<text class='text-grey'>Navigator 跳转</text>
</navigator>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-emojifill text-red'></text>
<text class='text-grey'>头像</text>
</view>
<view class='action'>
<view class="cu-avatar sm round">
<text class='icon-people'></text>
</view>
<view class="cu-modal {{modalName=='gridModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<radio-group class="block" bindchange="gridchange">
<view class='cu-list menu text-left'>
<view class='cu-item' wx:for="{{3}}" wx:key>
<label class='flex justify-between align-center flex-sub'>
<view class='flex-sub'>{{index +3}} 列</view>
<radio class='round' value='{{index +3}}' checked='{{gridCol==index+3}}'></radio>
</label>
</view>
</view>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-emojiflashfill text-pink'></text>
<text class='text-grey'>头像组</text>
</view>
<view class='action'>
<view class="cu-avatar-group">
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
</radio-group>
<view class='cu-list menu text-left solid-top'>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>边框</text>
</view>
<text class='text-grey text-sm'>4 人</text>
</view>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-crown text-green'></text>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='cu-btn round bg-green sm'>
<text class='icon-upload'></text> 上传</button>
</view>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-crownfill text-green'></text>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='cu-btn round bg-blue'>
<text class='icon-down'></text> 下载</button>
</view>
</view>
</view>
<view class="cu-list menu">
<view class="cu-item arrow">
<view class='content'>
<text class='icon-roundrightfill text-grey'></text>
<text class='text-grey'>箭头</text>
</view>
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-tagfill text-red'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<view class="cu-tag round bg-orange light">音乐</view>
<view class="cu-tag round bg-olive light">电影</view>
<view class="cu-tag round bg-blue light">旅行</view>
</view>
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-warn text-green'></text>
<text class='text-grey'>文本</text>
</view>
<view class='action'>
<text class='text-grey text-sm'>小目标还没有实现！</text>
</view>
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-warnfill text-green'></text>
<text class='text-grey'>文本</text>
<text class='text-grey text-sm margin-left-sm'>小目标还没有实现！</text>
</view>
</view>
</view>
<view class="cu-list menu no-padding">
<view class="cu-item">
<view class='content'>
<text class='icon-radiobox text-orange'></text>
<text class='text-grey'>徽章</text>
</view>
<view class='action'>
<view class='cu-tag bg-red round'></view>
</view>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-tagfill text-olive'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<view class='cu-tag bg-olive round'>9</view>
</view>
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-radioboxfill text-blue'></text>
<text class='text-grey'>胶囊</text>
</view>
<view class='action'>
<view class="cu-capsule round">
<view class='cu-tag bg-blue'>
<text class='icon-locationfill'></text>
</view>
<view class="cu-tag line-blue">
广州
</view>
<view class='action'>
<switch bindchange="gridswitch"></switch>
</view>
</view>
</view>
</view>
<view class="cu-list menu no-padding card-menu margin-bottom-xl">
<view class="cu-item">
<view class='content'>
<text class='icon-radiobox text-orange'></text>
<text class='text-grey'>徽章</text>
</view>
<view class='action'>
<view class='cu-tag bg-red round'></view>
</view>
<view class="cu-list grid col-{{gridCol}} {{gridBorder?'':'no-border'}}">
<view class="cu-item" wx:for="{{iconList}}" wx:key wx:if="{{index<gridCol*2}}">
<view class='icon-{{item.icon}} text-{{item.color}}'>
<view class="cu-tag badge" wx:if="{{item.badge!=0}}">
<block wx:if="{{item.badge!=1}}">{{item.badge>99?'99+':item.badge}}</block>
</view>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-tagfill text-olive'></text>
<text class='text-grey'>标签</text>
<text>{{item.name}}</text>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 菜单列表
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="menuModal">设置</button>
</view>
</view>
<view class="cu-modal {{modalName=='menuModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<view class='cu-list menu text-left solid-top'>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>短边框</text>
</view>
<view class='action'>
<switch bindchange="menuBorder"></switch>
</view>
</view>
<view class='action'>
<view class='cu-tag bg-olive round'>9</view>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>箭头</text>
</view>
<view class='action'>
<switch bindchange="menuArrow"></switch>
</view>
</view>
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-radioboxfill text-blue'></text>
<text class='text-grey'>胶囊</text>
</view>
<view class='action'>
<view class="cu-capsule round">
<view class='cu-tag bg-blue'>
<text class='icon-locationfill'></text>
</view>
<view class="cu-tag line-blue">
广州
</view>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>卡片</text>
</view>
<view class='action'>
<switch bindchange="menuCard"></switch>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-list menu {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}">
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-circlefill text-grey'></text>
<text class='text-grey'>图标 + 标题</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>图片 + 标题</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<button class='cu-btn content' open-type='contact'>
<text class='icon-btn text-olive'></text>
<text class='text-grey'>Open-type 按钮</text>
</button>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<navigator class='content' hover-class='none' url='../list/list' open-type="redirect">
<text class='icon-discoverfill text-orange'></text>
<text class='text-grey'>Navigator 跳转</text>
</navigator>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-emojiflashfill text-pink'></text>
<text class='text-grey'>头像组</text>
</view>
<view class='action'>
<view class="cu-avatar-group">
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
</view>
<text class='text-grey text-sm'>4 人</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-btn text-green'></text>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='cu-btn round bg-green shadow'>
<text class='icon-upload'></text> 上传</button>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-tagfill text-red'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<view class="cu-tag round bg-orange light">音乐</view>
<view class="cu-tag round bg-olive light">电影</view>
<view class="cu-tag round bg-blue light">旅行</view>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-warn text-green'></text>
<text class='text-grey'>文本</text>
</view>
<view class='action'>
<text class='text-grey text-sm'>小目标还没有实现！</text>
</view>
</view>
<view class="cu-item">
<view class='content padding-tb-sm'>
<view>
<text class='icon-clothesfill text-blue'></text> 多行Item</view>
<view class='text-gray text-sm'>
<text class='icon-infofill'></text> 小目标还没有实现！</view>
</view>
<view class='action'>
<switch class='switch-sex sm' bindchange="switchSex"></switch>
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 消息列表
</view>
</view>
<view class="cu-list menu menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<view class="cu-tag badge">99+</view>
</view>
<view class='content'>
<view class='text-grey'>文晓港
<view class="cu-tag round bg-orange sm">SVIP</view>
</view>
<view class='text-gray text-sm'>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class='icon-notice_forbid_fill text-gray'></view>
</view>
</view>
<view class="cu-item ">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item cur">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);">
<view class="cu-tag badge"></view>
</view>
<view class='content'>
<view>喵星人互动群
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class='text-gray text-sm'>
喵星酱：
<text class='icon-picfill text-orange'></text> 图片传输中...</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class='icon-notice_forbid_fill text-gray'></view>
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 列表右滑
</view>
</view>
<view class="cu-list menu menu-avatar">
<view class="cu-item {{modalName=='move-box-'+ index?'move-cur':''}}" wx:for="{{4}}" wx:key bindtouchstart='ListTouchStart' bindtouchmove='ListTouchMove' bindtouchend='ListTouchEnd' data-target="move-box-{{index}}">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
<view class='move'>
<view class='bg-grey'>置顶</view>
<view class="bg-red">删除</view>
</view>
</view>
</view>

18
demo/pages/component/list/list.wxss
View File

@@ -17,21 +17,3 @@
.switch-music::before {
content: "\e6db";
}
.invert {
filter: invert(100%);
}
.invert avatar tag, .invert [class*="text-"] tag,
.invert [class*="text-"] [class*="text-"] {
filter: invert(0%);
}
.invert button, .invert tag, .invert image, .invert avatar, .invert switch,
.invert [class*="text-"] {
filter: invert(100%);
}
.invert list.menu, .invert list.grid {
background: #ddd;
}

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

@@ -6,9 +6,9 @@
</view>
</view>
<view class="cu-bar ">
<view class="cu-bar">
<view class='action'>
<text class='icon-titles text-orange '></text> 模态窗口
<text class='icon-title text-orange '></text> 模态窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
@@ -28,9 +28,9 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 底部窗口
<text class='icon-title text-orange '></text> 底部窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
@@ -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">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
</view>
@@ -48,9 +48,9 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 对话窗口
<text class='icon-title text-orange '></text> 对话窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
@@ -98,9 +98,9 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 图片窗口
<text class='icon-title text-orange '></text> 图片窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
@@ -120,4 +120,107 @@
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>我知道了</view>
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 单选窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="RadioModal">Radio</button>
</view>
</view>
<view class="cu-modal {{modalName=='RadioModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<radio-group class="block">
<view class='cu-list menu text-left'>
<view class='cu-item' wx:for="{{5}}" wx:key>
<label class='flex justify-between align-center flex-sub'>
<view class='flex-sub'>Item {{index +1}}</view>
<radio class='round'></radio>
</label>
</view>
</view>
</radio-group>
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 多选窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="ChooseModal">Choose</button>
</view>
</view>
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<view class="cu-bar">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
</view>
<view class='grid col-3 padding-sm'>
<view wx:for="{{9}}" class='padding-xs' wx:key>
<button class='cu-btn orange lg block {{index == 2?"bg":"line"}}-orange'>Item {{index + 1}}</button>
</view>
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 侧边抽屉
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DrawerModalL">Left</button>
<button class='cu-btn bg-blue shadow margin-left' bindtap="showModal" data-target="DrawerModalR">Right</button>
</view>
</view>
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;">
<view class='cu-list menu text-left'>
<view class='cu-item arrow' wx:for="{{5}}" wx:key>
<view class='content'>
<view>Item {{index +1}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-modal drawer-modal justify-end {{modalName=='DrawerModalR'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;">
<view class="cu-list menu menu-avatar text-left">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<view class="cu-tag badge">99+</view>
</view>
<view class='content'>
<view class='text-grey'>文晓港
<view class="cu-tag round bg-orange sm">SVIP</view>
</view>
<view class='text-gray text-sm'>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</view>
</view>
</view>
</view>

48
demo/pages/component/steps/steps.js Normal file
View File

@@ -0,0 +1,48 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
basicsList: [{
icon: 'usefullfill',
name: '开始'
}, {
icon: 'radioboxfill',
name: '等待'
}, {
icon: 'roundclosefill',
name: '错误'
}, {
icon: 'roundcheckfill',
name: '完成'
},],
basics: 0,
numList: [{
name: '开始'
}, {
name: '等待'
}, {
name: '错误'
}, {
name: '完成'
},],
num: 0,
scroll: 0
},
basicsSteps() {
this.setData({
basics: this.data.basics == this.data.basicsList.length - 1 ? 0 : this.data.basics + 1
})
},
numSteps() {
this.setData({
num: this.data.num == this.data.numList.length - 1 ? 0 : this.data.num + 1
})
},
scrollSteps() {
this.setData({
scroll: this.data.scroll == 9 ? 0 : this.data.scroll + 1
})
}
});

3
demo/pages/component/steps/steps.json Normal file
View File

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

66
demo/pages/component/steps/steps.wxml Normal file
View File

@@ -0,0 +1,66 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed 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='action'>
<text class='icon-title text-orange'></text> 基本用法
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap='basicsSteps'>下一步</button>
</view>
</view>
<view class='bg-white padding'>
<view class='cu-steps'>
<view class='cu-item {{index>basics?"":"text-red"}}' wx:for="{{basicsList}}" wx:key>
<text class='icon-{{item.icon}}'></text> {{item.name}}
</view>
</view>
</view>
<view class='bg-white padding margin-top-xs'>
<view class='cu-steps'>
<view class='cu-item {{index>basics?"":"text-orange"}}' wx:for="{{basicsList}}" wx:key>
<text class='icon-{{index>basics?"title":item.icon}}'></text> {{item.name}}
</view>
</view>
</view>
<view class='bg-white padding margin-top-xs'>
<view class='cu-steps steps-arrow'>
<view class='cu-item {{index>basics?"":"text-blue"}}' wx:for="{{basicsList}}" wx:key>
<text class='icon-{{item.icon}}'></text> {{item.name}}
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange'></text> 数字完成
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap='numSteps'>下一步</button>
</view>
</view>
<view class='bg-white padding'>
<view class='cu-steps'>
<view class='cu-item {{index>num?"":"text-blue"}}' wx:for="{{numList}}" wx:key>
<text class='num {{index==2?"err":""}}' data-index='{{index + 1}}'></text> {{item.name}}
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange'></text> 多级显示
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap='scrollSteps'>下一步</button>
</view>
</view>
<scroll-view scroll-x class='bg-white padding response cu-steps steps-bottom' scroll-into-view="scroll-{{scroll}}" scroll-with-animation>
<view class='cu-item {{index>scroll?"":"text-blue"}} padding-lr-xl' wx:for="{{10}}" wx:key id="scroll-{{index}}">
Level {{index + 1}} <text class='num' data-index='{{index + 1}}'></text>
</view>
</scroll-view>

125
demo/pages/component/steps/steps.wxss Normal file
View File

@@ -0,0 +1,125 @@
.steps-bottom.cu-steps .cu-item .num::before {
content: "\e668";
font-family: 'iconfont';
}
.cu-steps {
display: flex;
}
scroll-view.cu-steps {
display: block;
white-space: nowrap;
}
scroll-view.cu-steps .cu-item {
display: inline-block;
}
.cu-steps .cu-item {
flex: 1;
text-align: center;
color: #aaa;
position: relative;
min-width: 100rpx;
}
.cu-steps .cu-item [class*="icon"], .cu-steps .cu-item .num {
display: block;
font-size: 40rpx;
line-height: 80rpx;
}
.cu-steps .cu-item::before, .cu-steps .cu-item::after,.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {
content: "";
display: block;
position: absolute;
height: 0px;
width: calc(100% - 80rpx);
border-bottom: 1px solid #ccc;
left: calc(0px - (100% - 80rpx) / 2);
top: 40rpx;
z-index: 0;
}
.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {
content: "\e6a3";
font-family: 'iconfont';
height: 30rpx;
border-bottom-width: 0px;
line-height: 30rpx;
top: 0;
bottom: 0;
margin: auto;
color: #ccc;
}
.cu-steps.steps-bottom .cu-item::before, .cu-steps.steps-bottom .cu-item::after {
bottom: 40rpx;
top: initial;
}
.cu-steps .cu-item::after {
border-bottom: 1px solid currentColor;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.cu-steps .cu-item[class*="text-"]::after {
width: calc(100% - 80rpx);
color: currentColor !important;
}
.cu-steps .cu-item:first-child::before, .cu-steps .cu-item:first-child::after {
display: none;
}
.cu-steps .cu-item .num {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
line-height: 40rpx;
margin: 20rpx auto;
font-size: 24rpx;
border: 1px solid currentColor;
position: relative;
overflow: hidden;
}
.cu-steps .cu-item[class*="text-"] .num {
background-color: currentColor;
}
.cu-steps .cu-item .num::before, .cu-steps .cu-item .num::after {
content: attr(data-index);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition: all 0.3s ease-in-out 0s;
transform: translateY(0rpx);
}
.cu-steps .cu-item[class*="text-"] .num::before {
transform: translateY(-40rpx);
color: #fff;
}
.cu-steps .cu-item .num::after {
transform: translateY(40rpx);
color: #fff;
transition: all 0.3s ease-in-out 0s;
}
.cu-steps .cu-item[class*="text-"] .num::after {
content: "\e645";
font-family: 'iconfont';
color: #fff;
transform: translateY(0rpx);
}
.cu-steps .cu-item[class*="text-"] .num.err::after {
content: "\e646";
}