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

v2.0.2

Browse Source 
v2.0.2 2.0版本上线
This commit is contained in:
Weilanwl
2018-12-23 03:03:40 +08:00
parent df555a143e
commit 967f46ae3d
257 changed files with 11663 additions and 4566 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/pages/basics/avatar/avatar.js
+14
View File
@@ -0,0 +1,14 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {},
pageBack() {
wx.navigateBack({
delta: 1
});
}
});
demo/pages/basics/avatar/avatar.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/avatar/avatar.wxml
+72
View File
@@ -0,0 +1,72 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 头像
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue' />头像形状
</view>
</bar>
<view class="padding">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<avatar class="radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />头像尺寸
</view>
</bar>
<view class="padding">
<avatar class="sm round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<avatar class="round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
<avatar class="lg round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<avatar class="xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></avatar>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />内嵌文字(图标)
</view>
</bar>
<view class="padding">
<avatar class="radius">
<icon class='icon-people' />
</avatar>
<avatar class="radius margin-left">
<text>港</text>
</avatar>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />头像颜色
</view>
</bar>
<view class="padding-sm">
<avatar class="round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key>
<text>{{item.name}}</text>
</avatar>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />头像组
</view>
</bar>
<view class='padding'>
<avatar-group>
<avatar class="round lg" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></avatar>
</avatar-group>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />头像标签
</view>
</bar>
<view class='padding'>
<avatar class="round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);">
<tag class="badge {{index%2==0?'icon-female bg-pink':'icon-male bg-blue'}}"></tag>
</avatar>
</view>
demo/pages/basics/avatar/avatar.wxss
+1
View File
@@ -0,0 +1 @@
/* pages/basics/avatar/avatar.wxss */
demo/pages/basics/background/background.js
+11
View File
@@ -0,0 +1,11 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {},
})
demo/pages/basics/background/background.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/background/background.wxml
+130
View File
@@ -0,0 +1,130 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 背景颜色
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />深色背景
</view>
</bar>
<view class='grid col-3 padding-sm'>
<view class='padding-sm' wx:for="{{ColorList}}" wx:key>
<view class='bg-{{item.name}} padding radius text-center shadow-blur'>
<view class="text-lg">{{item.title}}</view>
<view class='margin-top-sm text-Abc'>{{item.name}}</view>
</view>
</view>
</view>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />淡色背景
</view>
</bar>
<view class='grid col-3 bg-white padding-sm'>
<view class='padding-sm' wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<view class='bg-{{item.name}} padding radius text-center light'>
<view class="text-lg">{{item.title}}</view>
<view class='margin-top-sm text-Abc'>{{item.name}}</view>
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />渐变背景
</view>
</bar>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class='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="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="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="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="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="text-lg">霞彩</view>
<view class='margin-top-sm text-Abc'>#ec008c - #6739b6</view>
</view>
</view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />图片背景
</view>
</bar>
<view class="bg-img bg-mask padding-tb-xl" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg')">
<view class='padding-xl text-white'>
<view class='padding-xs text-xl'>
我和春天有个约会
</view>
<view class='padding-xs'>
I Have a Date with Spring
</view>
</view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />视频背景
</view>
</bar>
<view class="bg-video bg-mask">
<video src='https://www.weilanwl.com/theme/wl/assets/images/slider1.mp4' autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover"></video>
<cover-view class='padding-xl text-white'>
<cover-view class='padding-xs text-xl'>
开源是创新的动力之源
</cover-view>
<cover-view class='padding-xs'>
Open Source is the Power Source of Innovation
</cover-view>
</cover-view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />透明背景(文字层)
</view>
</bar>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class="bg-img padding-bottom-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
<view class='bg-shadeTop padding padding-bottom-xl'>
上面开始
</view>
</view>
</view>
<view class='padding-sm'>
<view class="bg-img padding-top-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
<view class='bg-shadeBottom padding padding-top-xl '>
下面开始
</view>
</view>
</view>
</view>
demo/pages/basics/background/background.wxss
View File
demo/pages/basics/button/button.js
+18
View File
@@ -0,0 +1,18 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
SetShadow(e) {
this.setData({
shadow: e.detail.value
})
},
SetBorderSize(e) {
this.setData({
bordersize: e.detail.value
})
},
});
demo/pages/basics/button/button.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/button/button.wxml
+99
View File
@@ -0,0 +1,99 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 按钮
</navigator>
<navigator class='action' url='design' hover-class="none">
<icon class='icon-skinfill' />
<text class="text-df">设计</text>
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue' />按钮形状
</view>
</bar>
<view class="padding flex flex-wrap justify-between align-center">
<button>默认</button>
<button class='round'>圆角</button>
<button class='icon'>
<icon class='icon-emojifill' />
</button>
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />按钮尺寸
</view>
</bar>
<view class="padding flex flex-wrap justify-between align-center">
<button class='round sm'>小尺寸</button>
<button class='round'>默认</button>
<button class='round lg'>大尺寸</button>
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />按钮颜色
</view>
<view class='action'>
<text class='text-df'>阴影</text>
<switch class='sm' bindchange='SetShadow'></switch>
</view>
</bar>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
<button class='round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
</view>
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />镂空按钮
</view>
<view class='action'>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked/>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='s' />
<text> 大</text>
</label>
</radio-group>
</view>
</bar>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}">
<button class='round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
</view>
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />块状按钮
</view>
</bar>
<view class="padding flex flex-direction">
<button class='bg-grey lg'>玄灰</button>
<button class='bg-red margin-tb-sm lg'>嫣红</button>
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />无效状态
</view>
</bar>
<view class="padding">
<button class='block bg-blue margin-tb-sm lg' disabled type=''>无效状态</button>
<button class='block line-blue margin-tb-sm lg' disabled>无效状态</button>
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />按钮加图标
</view>
</bar>
<view class="padding-xl">
<button class='block line-orange lg'>
<icon class='icon-upload' /> 图标</button>
<button class='block bg-blue margin-tb-sm lg'>
<icon class='icon-loading2 iconfont-spin' /> 加载</button>
<button class='block bg-black margin-tb-sm lg' loading> 微信加载</button>
</view>
demo/pages/basics/button/button.wxss
+1
View File
@@ -0,0 +1 @@
demo/pages/basics/button/design.js
+59
View File
@@ -0,0 +1,59 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
SetRound (e) {
this.setData({
round: e.detail.value
})
},
SetSize(e) {
this.setData({
size: e.detail.value
})
},
SetColor(e) {
this.setData({
color: e.currentTarget.dataset.color,
modalName: null
})
},
SetShadow(e) {
this.setData({
shadow: e.detail.value
})
},
SetBorder(e){
this.setData({
border: e.detail.value
})
if (!e.detail.value){
this.setData({
bordersize: false
})
}
},
SetBorderSize(e) {
this.setData({
bordersize: e.detail.value
})
},
SetBlock(e) {
this.setData({
block: e.detail.value
})
},
});
demo/pages/basics/button/design.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/button/design.wxml
+81
View File
@@ -0,0 +1,81 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 按钮 / 设计
</navigator>
</bar>
</custom>
<view class="padding-xl">
<view class="box bg-white text-center radius {{block?'flex-direction':''}}">
<button class='{{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>
<form-group class="margin-top" bindtap="showModal" data-target="ColorModal">
<view class='title'>选择颜色</view>
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
</form-group>
<form-group>
<view class='title'>是否圆角</view>
<switch class='sm' bindchange='SetRound'></switch>
</form-group>
<form-group>
<view class='title'>选择尺寸</view>
<radio-group bindchange='SetSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='sm' />
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked/>
<text> 中</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='lg' />
<text> 大</text>
</label>
</radio-group>
</form-group>
<form-group>
<view class='title'>是否添加阴影</view>
<switch class='sm' bindchange='SetShadow'></switch>
</form-group>
<form-group>
<view class='title'>是否镂空</view>
<switch class='sm' bindchange='SetBorder'></switch>
</form-group>
<form-group wx:if="{{border}}">
<view class='title'>边框大小</view>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked/>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='s' />
<text> 大</text>
</label>
</radio-group>
</form-group>
<!-- <form-group>
<view class='title'>定义为块元素</view>
<switch class='sm' bindchange='SetBlock'></switch>
</form-group> -->
<modal-box class="{{modalName=='ColorModal'?'show':''}}">
<dialog>
<bar class="justify-end">
<view class='content'>选择颜色</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
</view>
</bar>
<view class='grid col-5 padding'>
<view class='padding-xs' wx:for="{{ColorList}}" wx:key bindtap='SetColor' data-color='{{item.name}}'>
<view class='padding-tb bg-{{item.name}} radius'> {{item.title}} </view>
</view>
</view>
</dialog>
</modal-box>
demo/pages/basics/button/design.wxss
+6
View File
@@ -0,0 +1,6 @@
.box{
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}
demo/pages/basics/form/form.js
+10
View File
@@ -0,0 +1,10 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
onLoad: function() {
},
});
demo/pages/basics/form/form.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/form/form.wxml
+61
View File
@@ -0,0 +1,61 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/>
表单控件
</navigator>
<view class='action'>
</view>
</bar>
</custom>
<view class='text-center'>
<view class="padding-xl ">
<checkbox class=''></checkbox>
<radio-group>
<radio class='' checked name="sex" />
<radio class='blue sm' name="sex" />
</radio-group>
</view>
<view class="padding-xl ">
<switch class='' />
<radio-group>
<radio class='red radio' checked name="sex" />
<radio class='blue radio' name="sex" />
</radio-group>
<checkbox class='blue'></checkbox>
<checkbox class='cyan round'></checkbox>
</view>
<view class="padding-xl ">
<switch class=' sm' />
<radio-group>
<radio class='red radio sm' checked name="sex" />
<radio class='blue radio sm' name="sex" />
</radio-group>
<checkbox class='red sm'></checkbox>
<checkbox class='cyan round sm'></checkbox>
</view>
<view class="padding-xl ">
<switch class='switch-sex' checked/>
<switch class='switch-sex sm' />
</view>
<view class="padding-xl ">
<switch class='red' checked/>
<switch class='blue sm' checked/>
</view>
<view class="padding-xl ">
<switch class='' checked/>
<switch class=' sm' checked/>
</view>
<view class="padding-xl ">
<switch class='' />
<switch class=' sm' />
</view>
<view class="padding-xl ">
<switch class='orange sm radius' />
<switch class='yellow radius' />
</view>
<view class="padding-xl ">
<switch class='blue radius' />
</view>
</view>
demo/pages/basics/form/form.wxss
View File
demo/pages/basics/home/home.js
+23
View File
@@ -0,0 +1,23 @@
Page({
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' },
],
},
onShareAppMessage(){
return {
title: 'ColorUI-高颜值的小程序UI组件库',
imageUrl:'https://image.weilanwl.com/color2.0/share2215.jpg',
path: '/pages/basics/home/home'
}
}
})
demo/pages/basics/home/home.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/home/home.wxml
+8
View File
@@ -0,0 +1,8 @@
<image src='/images/BasicsBg.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
<view class='nav-list'>
<navigator open-type="navigate" hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key>
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<icon class='icon-{{item.icon}}'/>
</navigator>
</view>
demo/pages/basics/home/home.wxss
View File
demo/pages/basics/icon/icon.js
+28
View File
File diff suppressed because one or more lines are too long
demo/pages/basics/icon/icon.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/icon/icon.wxml
+22
View File
@@ -0,0 +1,22 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/> 图标
</navigator>
<view class='action'>
</view>
</bar>
</custom>
<bar class="search fixed" style="top:{{CustomBar}}px">
<view class='serach-form round'>
<icon class="icon-search"/>
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'/>
</view>
</bar>
<list class="grid col-3">
<item wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
<icon class='icon-{{item.name}} lg text-gray'/>
<text>{{item.name}}</text>
</item>
</list>
demo/pages/basics/icon/icon.wxss
+6
View File
@@ -0,0 +1,6 @@
page{
padding-top: 50px;
}
item.none{
display: none;
}
demo/pages/basics/image/image.js
+10
View File
@@ -0,0 +1,10 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
onLoad: function() {
},
});
demo/pages/basics/image/image.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/image/image.wxml
+14
View File
@@ -0,0 +1,14 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/>
图片
</navigator>
<view class='action'>
</view>
</bar>
</custom>
<image class="" src="https://image.weilanwl.com/img/square-4.jpg" mode="widthFix" lazy-load="true" binderror="" bindload=""></image>
<view><text>好</text></view>
demo/pages/basics/image/image.wxss
+19
View File
@@ -0,0 +1,19 @@
/* view {
background: RED;
width: 100px;
height: 100px;
margin: 100px;
border-top-left-radius: 38.2% 61.8%;
border-top-right-radius: 61.8% 38.2%;
border-bottom-right-radius: 38.2% 61.8%;
border-bottom-left-radius: 61.8% 38.2%;
transform: rotate(-20deg);
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
color: #fff;
}
view text{
transform: rotate(20deg);
} */
demo/pages/basics/layout/layout.js
+16
View File
@@ -0,0 +1,16 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
TabCur:0,
tabNav: ['Flex布局', 'Grid布局', '辅助布局']
},
tabSelect(e) {
console.log(e);
this.setData({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
})
}
})
demo/pages/basics/layout/layout.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/layout/layout.wxml
+185
View File
@@ -0,0 +1,185 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 布局
</navigator>
</bar>
</custom>
<scroll-view scroll-x class="bg-white nav text-center fixed" style="top:{{CustomBar}}px">
<item class="{{index==TabCur?'text-blue cur':''}}" wx:for="{{tabNav}}" wx:key bindtap='tabSelect' data-id="{{index}}">
{{tabNav[index]}}
</item>
</scroll-view>
<block wx:if="{{TabCur==0}}">
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />固定尺寸
</view>
</bar>
<view class="padding bg-white">
<view class="flex flex-wrap">
<view class='basis-xs bg-grey margin-xs padding-sm radius'>xs(20%)</view>
<view class='basis-df'></view>
<view class='basis-sm bg-grey margin-xs padding-sm radius'>sm(40%)</view>
<view class='basis-df'></view>
<view class='basis-df bg-grey margin-xs padding-sm radius'>sub(50%)</view>
<view class='basis-lg bg-grey margin-xs padding-sm radius'>lg(60%)</view>
<view class='basis-xl bg-grey margin-xs padding-sm radius'>xl(80%)</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />比例布局
</view>
</bar>
<view class="padding bg-white">
<view class="flex">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
</view>
<view class="flex p-xs margin-bottom-sm mb-sm">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
</view>
<view class="flex p-xs margin-bottom-sm mb-sm">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
<view class='flex-treble bg-grey padding-sm margin-xs radius'>3</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />水平对齐(justify)
</view>
</bar>
<view class="bg-white">
<view class="flex solid-bottom padding justify-start">
<view class='bg-grey padding-sm margin-xs radius'>start</view>
<view class='bg-grey padding-sm margin-xs radius'>start</view>
</view>
<view class="flex solid-bottom padding justify-end">
<view class='bg-grey padding-sm margin-xs radius'>end</view>
<view class='bg-grey padding-sm margin-xs radius'>end</view>
</view>
<view class="flex solid-bottom padding justify-center">
<view class='bg-grey padding-sm margin-xs radius'>center</view>
<view class='bg-grey padding-sm margin-xs radius'>center</view>
</view>
<view class="flex solid-bottom padding justify-between">
<view class='bg-grey padding-sm margin-xs radius'>between</view>
<view class='bg-grey padding-sm margin-xs radius'>between</view>
</view>
<view class="flex solid-bottom padding justify-around">
<view class='bg-grey padding-sm margin-xs radius'>around</view>
<view class='bg-grey padding-sm margin-xs radius'>around</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />垂直对齐(align)
</view>
</bar>
<view class="bg-white">
<view class="flex solid-bottom padding align-start">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>start</view>
</view>
<view class="flex solid-bottom padding align-end">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>end</view>
</view>
<view class="flex solid-bottom padding align-center">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>center</view>
</view>
</view>
</block>
<block wx:if="{{TabCur==1}}">
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />等分列
</view>
<view class='action'></view>
</bar>
<view class="bg-white padding">
<view class="grid col-{{index+1}} margin-bottom text-center" wx:for="{{5}}" wx:key>
<view class="{{index%2==0?'bg-cyan':'bg-blue'}} padding" wx:for="{{(index+1)*2}}" wx:key>{{index+1}}</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />等高
</view>
<view class='action'></view>
</bar>
<view class="bg-white padding">
<view class="grid col-4 grid-square">
<view class="bg-img" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
</view>
</view>
</block>
<block wx:if="{{TabCur==2}}">
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />浮动
</view>
</bar>
<view class="bg-white padding">
<view class=" cf padding-sm">
<view class='bg-grey radius fl padding-sm'>ColorUi fl</view>
<view class='bg-grey radius fr padding-sm'>ColorUi fr</view>
</view>
</view>
</block>
<block wx:if="{{TabCur==3}}">
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />内外边距
</view>
</bar>
<view class="bg-white">
<view class='padding bg-gray'>{size}的尺寸有xs/sm/df/lg/xl</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">外边距</view>
<view class="basis-df padding-bottom-xs">内边距</view>
<view class="basis-df">.margin-{size}</view>
<view class="basis-df">.padding-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">水平方向外边距</view>
<view class="basis-df padding-bottom-xs">水平方向内边距</view>
<view class="basis-df">.margin-lr-{size}</view>
<view class="basis-df">.padding-lr-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">垂直方向外边距</view>
<view class="basis-df padding-bottom-xs">垂直方向内边距</view>
<view class="basis-df">.margin-tb-{size}</view>
<view class="basis-df">.padding-tb-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">上外边距</view>
<view class="basis-df padding-bottom-xs">上内边距</view>
<view class="basis-df">.margin-top-{size}</view>
<view class="basis-df">.padding-top-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">右外边距</view>
<view class="basis-df padding-bottom-xs">右内边距</view>
<view class="basis-df">.margin-right-{size}</view>
<view class="basis-df">.padding-right-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">下外边距</view>
<view class="basis-df padding-bottom-xs">下内边距</view>
<view class="basis-df">margin-bottom-{size}</view>
<view class="basis-df">.padding-bottom-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">左外边距</view>
<view class="basis-df padding-bottom-xs">左内边距</view>
<view class="basis-df">.margin-left-{size}</view>
<view class="basis-df">.padding-left-{size}</view>
</view>
</view>
</block>
demo/pages/basics/layout/layout.wxss
+3
View File
@@ -0,0 +1,3 @@
page{
padding-top: 45px;
}
demo/pages/basics/loading/loading.js
+12
View File
@@ -0,0 +1,12 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
isLoading (e) {
this.setData({
isLoad: e.detail.value
})
},
});
demo/pages/basics/loading/loading.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/loading/loading.wxml
+31
View File
@@ -0,0 +1,31 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 加载
</navigator>
<view class='action'>
<load class="load-icon {{!isLoad?'loading':'over'}}"></load>
</view>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue'/>背景
</view>
</bar>
<load class="bg-blue {{!isLoad?'loading':'over'}}"></load>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>加载状态
</view>
<view class='action'>
<switch class='sm' bindchange='isLoading'></switch>
</view>
</bar>
<load class="bg-grey {{!isLoad?'loading':'over'}}"></load>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>加载错误
</view>
</bar>
<load class="bg-red erro"></load>
demo/pages/basics/loading/loading.wxss
+1
View File
@@ -0,0 +1 @@
/* pages/basics/load/load.wxss */
demo/pages/basics/progress/progress.js
+38
View File
@@ -0,0 +1,38 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
color:'red',
},
onLoad() {
let that = this;
setTimeout(function() {
that.setData({
loading: true
})
}, 500)
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
SetColor(e) {
this.setData({
color: e.currentTarget.dataset.color,
modalName: null
})
},
SetActive(e) {
this.setData({
active: e.detail.value
})
},
});
demo/pages/basics/progress/progress.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/progress/progress.wxml
+116
View File
@@ -0,0 +1,116 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 进度条
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />进度条形状
</view>
</bar>
<view class="padding bg-white">
<progress-bar>
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</progress-bar>
<progress-bar class="radius margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</progress-bar>
<progress-bar class="round margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</progress-bar>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />进度条尺寸
</view>
</bar>
<view class="padding bg-white">
<progress-bar class="round">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
<progress-bar class="round margin-top sm">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
<progress-bar class="round margin-top xs">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
</view>
<bar class="solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<view class='action'>
<icon class='icon-title text-blue' />进度条颜色
</view>
<view class='action'>
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
</view>
</bar>
<view class="padding {{color=='white'?'bg-grey':'bg-white'}}">
<progress-bar class="round">
<view class='bg-{{color}}' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />进度条条纹
</view>
<switch class='sm margin-right-sm' bindchange='SetActive'></switch>
</bar>
<view class="padding bg-white">
<progress-bar class="round sm striped {{active?'active':''}}">
<view class='bg-green' style="width:{{loading?'60%':''}};"></view>
</progress-bar>
<progress-bar class="round sm margin-top-sm striped {{active?'active':''}}">
<view class='bg-black' style="width:{{loading?'40%':''}};"></view>
</progress-bar>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />进度条比例
</view>
</bar>
<view class="padding bg-white">
<progress-bar class="radius striped active">
<view class='bg-red' style="width:{{loading?'30%':''}};">30%</view>
<view class='bg-olive' style="width:{{loading?'45%':''}};">45%</view>
<view class='bg-cyan' style="width:{{loading?'25%':''}};">25%</view>
</progress-bar>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />进度条布局
</view>
</bar>
<view class="padding bg-white ">
<view class='flex'>
<progress-bar class="round">
<view class='bg-green' style="width:{{loading?'100%':''}};"></view>
</progress-bar>
<icon class='icon-roundcheckfill text-green margin-left-sm' />
</view>
<view class='flex margin-top'>
<progress-bar class="round">
<view class='bg-green' style="width:{{loading?'80%':''}};"></view>
</progress-bar>
<text class='margin-left'>80%</text>
</view>
</view>
<modal-box class="{{modalName=='ColorModal'?'show':''}}">
<dialog>
<bar class="justify-end">
<view class='content'>选择颜色</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
</view>
</bar>
<view class='grid col-5 padding'>
<view class='padding-xs' wx:for="{{ColorList}}" wx:key bindtap='SetColor' data-color='{{item.name}}' wx:if="{{item.name!='gray'}}">
<view class='padding-tb bg-{{item.name}} radius'> {{item.title}} </view>
</view>
</view>
</dialog>
</modal-box>
demo/pages/basics/progress/progress.wxss
View File
demo/pages/basics/shadow/shadow.js
+12
View File
@@ -0,0 +1,12 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
SetSize(e) {
this.setData({
size: e.detail.value
})
},
});
demo/pages/basics/shadow/shadow.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/shadow/shadow.wxml
+34
View File
@@ -0,0 +1,34 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 边框阴影
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />边框
</view>
<view class='action'>
<switch class='sm' bindchange='SetSize'></switch>
</view>
</bar>
<view class='padding bg-white text-center'>
<view class='padding solid{{size?"s":""}}'>四周</view>
<view class='padding solid{{size?"s":""}}-top margin-top'>上</view>
<view class='padding solid{{size?"s":""}}-right margin-top'>右</view>
<view class='padding solid{{size?"s":""}}-bottom margin-top'>下</view>
<view class='padding solid{{size?"s":""}}-left margin-top'>左</view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />阴影
</view>
</bar>
<view class="padding text-center">
<view class="padding-xl radius shadow bg-white"> 默认阴影</view>
<view class="padding-xl radius shadow-lg bg-white margin-top">长阴影</view>
<view class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</view>
<view class="padding-xl radius shadow-blur bg-red margin-top">根据背景颜色而改变的阴影</view>
<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"><view>根据背景颜色而改变的阴影</view></view>
</view>
demo/pages/basics/shadow/shadow.wxss
View File
demo/pages/basics/tag/tag.js
+11
View File
@@ -0,0 +1,11 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {
}
});
demo/pages/basics/tag/tag.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/tag/tag.wxml
+119
View File
@@ -0,0 +1,119 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 标签
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue' />标签形状
</view>
</bar>
<view class="padding">
<tag>默认</tag>
<tag class='round'>椭圆</tag>
<tag class='radius'>圆角</tag>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />标签尺寸
</view>
</bar>
<view class="padding">
<tag class='radius sm'>小尺寸</tag>
<tag class='radius'>普通尺寸</tag>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />标签颜色
</view>
</bar>
<view class='padding-sm flex flex-wrap'>
<view class="padding-xs" wx:for="{{ColorList}}" wx:key>
<tag class='bg-{{item.name}}'>{{item.title}}</tag>
</view>
<view class="padding-xs" wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<tag class='bg-{{item.name}} light'>{{item.title}}</tag>
</view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />镂空标签
</view>
</bar>
<view class='padding-sm flex flex-wrap'>
<view class="padding-xs" wx:for="{{ColorList}}" wx:key>
<tag class='line-{{item.name}}'>{{item.title}}</tag>
</view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />胶囊样式
</view>
</bar>
<view class="padding">
<capsule>
<tag class='bg-red'>
<icon class='icon-likefill' />
</tag>
<tag class="line-red">
12
</tag>
</capsule>
<capsule class="round">
<tag class='bg-blue '>
<icon class='icon-likefill' />
</tag>
<tag class="line-blue">
23
</tag>
</capsule>
<capsule class="round">
<tag class='bg-blue '>
说明
</tag>
<tag class="line-blue">
123
</tag>
</capsule>
<capsule class="radius">
<tag class='bg-grey '>
<icon class='icon-likefill' />
</tag>
<tag class="line-grey">
23
</tag>
</capsule>
<capsule class="radius">
<tag class='bg-brown sm'>
<icon class='icon-likefill' />
</tag>
<tag class="line-brown sm">
23
</tag>
</capsule>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />数字标签
</view>
</bar>
<view class="padding flex justify-between align-center">
<avatar class='xl radius'>
港
<tag class="badge">99+</tag>
</avatar>
<avatar class='xl radius' style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);">
<tag class='badge'>9</tag>
</avatar>
<avatar class='xl radius'>
<tag class='badge'>99</tag>
<icon class='icon-people' />
</avatar>
<avatar class='xl radius'>
<tag class='badge'>99+</tag>
</avatar>
</view>
demo/pages/basics/tag/tag.wxss
View File
demo/pages/basics/text/text.js
+85
View File
@@ -0,0 +1,85 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
list: [{
title: '嫣红',
name: 'red',
color: '#e54d42'
},
{
title: '桔橙',
name: 'orange',
color: '#f37b1d'
},
{
title: '明黄',
name: 'yellow',
color: '#fbbd08'
},
{
title: '橄榄',
name: 'olive',
color: '#8dc63f'
},
{
title: '森绿',
name: 'green',
color: '#39b54a'
},
{
title: '天青',
name: 'cyan',
color: '#1cbbb4'
},
{
title: '海蓝',
name: 'blue',
color: '#0081ff'
},
{
title: '姹紫',
name: 'purple',
color: '#6739b6'
},
{
title: '木槿',
name: 'mauve',
color: '#9c26b0'
},
{
title: '桃粉',
name: 'pink',
color: '#e03997'
},
{
title: '棕褐',
name: 'brown',
color: '#a5673f'
},
{
title: '玄灰',
name: 'grey',
color: '#8799a3'
},
{
title: '草灰',
name: 'gray',
color: '#aaaaaa'
},
{
title: '墨黑',
name: 'black',
color: '#333333'
},
{
title: '雅白',
name: 'white',
color: '#ffffff'
},
]
},
onLoad: function () { },
})
demo/pages/basics/text/text.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/basics/text/text.wxml
+148
View File
@@ -0,0 +1,148 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/> 文本
</navigator>
<view class='action'>
</view>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue'/>文字大小
</view>
</bar>
<view class='bg-white padding-lr'>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>60</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xsl padding'>
<icon class=' icon-roundcheckfill text-green'/>
</view>
<view class='padding'>用于图标、数字等特大显示</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>40</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-sl padding'>
<icon class=' icon-roundcheckfill text-green'/>
</view>
<view class='padding'>用于图标、数字等较大显示</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>22</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xxl padding'>
<text class='text-price text-red'>80.00</text>
</view>
<view class='padding'>用于金额数字等信息</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>18</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xl padding'>
<text class='text-black text-bold'>您的订单已提交成功！</text>
</view>
<view class='padding'>页面大标题，用于结果页等单一信息页</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>16</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-lg padding'>
<text class='text-black'>ColorUI组件库</text>
</view>
<view class='padding'>页面小标题，首要层级显示内容</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>14</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-df padding'>专注视觉的小程序组件库</view>
<view class='padding'>页面默认字号，用于摘要或阅读文本</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>12</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-sm padding'>
<text class='text-grey'>衬衫的价格是9磅15便士</text>
</view>
<view class='padding'>页面辅助信息，次级内容等</view>
</view>
</view>
<view class='padding-xs flex align-center'>
<view class='padding'>10</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xs padding'>
<text class='text-gray'>我于杀戮之中绽放 亦如黎明中的花朵</text>
</view>
<view class='padding'>说明文本，标签文字等关注度低的文字</view>
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>文字颜色
</view>
</bar>
<view class='grid col-5 padding-sm'>
<view class='padding-sm' wx:for="{{list}}" wx:key>
<view class='text-{{item.name}} text-center'>
{{item.title}}
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>文字截断
</view>
</bar>
<view class='padding bg-white'>
<view class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>文字对齐
</view>
</bar>
<view class='padding bg-white'>
<view class='text-left padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class='text-center padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class='text-right padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>特殊文字
</view>
</bar>
<view class='padding text-center'>
<view class='padding-lr bg-white'>
<view class='solid-bottom padding'>
<text class='text-price'>80.00</text>
</view>
<view class='padding'>价格文本，利用伪元素添加"¥"符号</view>
</view>
<view class='padding-lr bg-white margin-top'>
<view class='solid-bottom padding'>
<text class='text-Abc'>color Ui</text>
</view>
<view class='padding'>英文单词首字母大写</view>
</view>
<view class='padding-lr bg-white margin-top'>
<view class='solid-bottom padding'>
<text class='text-ABC'>color Ui</text>
</view>
<view class='padding'>全部字母大写</view>
</view>
<view class='padding-lr bg-white margin-top'>
<view class='solid-bottom padding'>
<text class='text-abc'>color Ui</text>
</view>
<view class='padding'>全部字母小写</view>
</view>
</view>
demo/pages/basics/text/text.wxss
+1
View File
@@ -0,0 +1 @@
/* pages/basics/text/text.wxss */
demo/pages/component/bar/bar.js
+8
View File
@@ -0,0 +1,8 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
},
})
demo/pages/component/bar/bar.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/component/bar/bar.wxml
+245
View File
@@ -0,0 +1,245 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' />
<text>操作条</text>
</navigator>
</bar>
</custom>
<bar class="margin-top">
<view class='action'>
<icon class='icon-back text-gray' />
<text>返回</text>
</view>
</bar>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-green ' />
<text>案例</text>
</view>
<view class='action'>
<button class='bg-green shadow-blur sm'>添加
<icon class='icon-add' /> </button>
</view>
</bar>
<bar class="margin-top justify-end">
<view class='action'>
<icon class='icon-close text-red'></icon>
</view>
</bar>
<bar class="margin-top">
<view class='action'>
<icon class='icon-back text-gray' /> 返回
</view>
<view class='content'>
操作条
</view>
</bar>
<bar class="margin-top">
<view class='action'>
<icon class='icon-homefill text-gray' /> 首页
</view>
<view class='content'>
鲜亮的高饱和色彩，专注视觉的小程序组件库
</view>
<view class='action'>
<icon class='icon-cardboardfill text-grey' />
<icon class='icon-recordfill text-red' />
</view>
</bar>
<bar class="margin-top bg-blue">
<view class='action'>
<icon class='icon-close' /> 关闭
</view>
<view class='content'>
海蓝
</view>
</bar>
<bar class="margin-top bg-orange">
<view class='action'>
<icon class='icon-back' /> 返回
</view>
<view class='content'>
操作条
</view>
</bar>
<bar class="margin-top bg-black search">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class='content'>
ColorUI
</view>
<view class='action'>
<icon class="icon-more" />
</view>
</bar>
<bar class="margin-top bg-red search">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<view class='serach-form radius'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
</view>
<view class='action'>
<text>广州</text>
<icon class="icon-triangledownfill" />
</view>
</bar>
<bar class="margin-top search">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
<view class='serach-form round'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
</view>
<view class='action'>
<text>广州</text>
<icon class="icon-triangledownfill" />
</view>
</bar>
<bar class="margin-top bg-cyan search">
<view class='serach-form radius'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
</view>
<view class='action'>
<icon class='icon-close' />
<text>取消</text>
</view>
</bar>
<bar class="margin-top search">
<view class='serach-form round'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
</view>
<view class='action'>
<button class='bg-green shadow-blur round'>搜索</button>
</view>
</bar>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur round'>保存</button>
</bar>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur round lg'>保存</button>
</bar>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur'>保存</button>
<button class='text-green line-green shadow'>上传</button>
</bar>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur round'>保存</button>
<button class='bg-blue shadow-blur round'>提交</button>
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
客服
</view>
<view class="action text-orange">
<icon class='icon-favorfill' /> 已收藏
</view>
<view class="action">
<icon class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
购物车
</view>
<view class='bg-red submit'>立即订购</view>
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
客服
</view>
<view class="action">
<icon class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
购物车
</view>
<view class='bg-orange submit'>加入购物车</view>
<view class='bg-red submit'>立即订购</view>
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
客服
</view>
<view class="action">
<icon class=' icon-shop' /> 店铺
</view>
<view class="action">
<icon class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
购物车
</view>
<view class='submit'>
<button class='bg-red round shadow-blur'>立即订购</button>
</view>
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
客服
</view>
<view class="action">
<icon class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
购物车
</view>
<view class='submit'>
<button class='bg-orange round shadow-blur'>加入购物车</button>
</view>
<view class='submit'>
<button class='bg-red round shadow-blur'>立即订购</button>
</view>
</bar>
<bar class="margin-top input">
<view class='action'>
<icon class='icon-sound text-grey' />
</view>
<input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
<view class='action'>
<icon class='icon-emojifill text-grey' />
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>
<bar class="margin-top input">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class='action'>
<icon class='icon-roundaddfill text-grey' />
</view>
<input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
<view class='action'>
<icon class='icon-emojifill text-grey' />
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>
demo/pages/component/bar/bar.wxss
View File
demo/pages/component/card/card.js
+12
View File
@@ -0,0 +1,12 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
isCard(e) {
this.setData({
isCard: e.detail.value
})
},
});
demo/pages/component/card/card.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/component/card/card.wxml
+123
View File
@@ -0,0 +1,123 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 卡片
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-titles text-orange ' /> 案例类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
</view>
</bar>
<card class="case {{isCard?'no-card':''}}">
<item wx:for="{{1}}" wx:key class="shadow">
<view class='image'>
<image src="https://image.weilanwl.com/img/4x3-1.jpg" mode="widthFix"></image>
<tag class="bg-blue">福利</tag>
<bar class='bg-shadeBottom'>我和制服不得不说的那些事！</bar>
</view>
<list class="menu menu-avatar">
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></avatar>
<view class='content flex-sub'>
<view class='text-grey'>猪皮蛋</view>
<view class='text-gray text-sm flex justify-between'>
十天前
<view class="text-gray text-sm">
<icon class="icon-attentionfill" /> 10
<icon class="icon-appreciatefill" /> 20
<icon class="icon-messagefill" /> 30
</view>
</view>
</view>
</item>
</list>
</item>
</card>
<bar class="solid-bottom {{isCard?'margin-top':''}}">
<view class='action'>
<icon class='icon-titles text-orange ' /> 动态类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
</view>
</bar>
<card class="dynamic {{isCard?'no-card':''}}">
<item wx:for="1" wx:key class="shadow">
<list class="menu menu-avatar">
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<view class='content flex-sub'>
<view>晓晓萌</view>
<view class='text-gray text-sm flex justify-between'>
2018年12月3日
</view>
</view>
</item>
</list>
<view class='text-content'>
你们的铲屎官是不是经常突然对手机傻笑？我家铲屎官常常坐沙发上笑的发抖！（暗中观察.jpg）
</view>
<view class="grid {{isCard?'col-3 grid-square':'col-1'}} flex-sub padding-lr">
<view class="bg-img {{isCard?'':'only-img'}}" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);" wx:for="{{isCard?9:1}}" wx:key>
</view>
</view>
<view class='text-gray text-sm text-right padding'>
<icon class="icon-attentionfill" /> 10
<icon class="icon-appreciatefill" /> 20
<icon class="icon-messagefill" /> 30
</view>
<list class="menu menu-avatar comment solids-top">
<item wx:for="{{2}}" wx:key>
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<view class='content'>
<view class='text-grey'>猪皮蛋</view>
<view class='text-gray text-content text-df'>
我家铲屎官不舔毛，还抠脚！
</view>
<view class='bg-grey padding-sm radius margin-top-sm text-sm' wx:if="{{index==1}}">
<view class="flex {{index!=0?'margin-top-sm':'' }}" wx:for="{{2}}" wx:key>
<view>我：</view>
<view class='flex-sub'>我家的铲屎官也不舔毛！</view>
</view>
</view>
<view class='margin-top-sm flex justify-between'>
<view class='text-gray text-df'>2018年12月4日</view>
<view>
<icon class="icon-appreciate{{!isZan?'fill':''}} text-{{!isZan?'red':'gray'}}" />
<icon class="icon-messagefill text-gray margin-left-sm" />
</view>
</view>
</view>
</item>
</list>
</item>
</card>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-titles text-orange ' /> 文章类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
</view>
</bar>
<card class="article {{isCard?'no-card':''}}">
<item wx:for="1" wx:key class="shadow">
<view class="title">这里有个戏精铲屎官，主子了解一下？</view>
<view class="content">
<image src="https://image.weilanwl.com/img/4x3-3.jpg" mode="aspectFill"></image>
<view class="desc">
<view class='text-content'> 这是一个伪铲屎官为了给自己的程序凑字数瞎几把乱写的一堆文字，了解一下就OK！ヾ(=･ω･=)o</view>
<view>
<tag class='bg-red light sm round'>假装有猫系列</tag>
<tag class='bg-green light sm round'>戏精系列</tag>
</view>
</view>
</view>
</item>
</card>
demo/pages/component/card/card.wxss
View File
demo/pages/component/chat/chat.js
+9
View File
@@ -0,0 +1,9 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
onLoad: function () { },
});
demo/pages/component/chat/chat.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/component/chat/chat.wxml
+91
View File
@@ -0,0 +1,91 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/>
聊天
</navigator>
</bar>
</custom>
<chat>
<item class="self">
<view class="main">
<view class='content bg-green shadow-blur'>
<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
</view>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class='date'>2018年3月23日 13:23</view>
</item>
<info class='round'>对方撤回一条消息!</info>
<item>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
<view class="main">
<view class='content shadow'>
<text>喵喵喵！喵喵喵！</text>
</view>
</view>
<view class='date '> 13:23</view>
</item>
<info>
<icon class='icon-roundclosefill text-red '/> 对方拒绝了你的消息
</info>
<info>
对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
<text class='text-blue'>发送好友验证</text>
</info>
<item class="self">
<view class="main">
<image src="https://image.weilanwl.com/img/3x4-1.jpg" class='radius' mode="widthFix"></image>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class='date'> 13:23</view>
</item>
<item class="self">
<view class="main">
<view class='action text-bold text-grey'>
3"
</view>
<view class='content shadow'>
<icon class='icon-sound text-xxl padding-right-xl'> </icon>
</view>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class='date'>13:23</view>
</item>
<item class="self">
<view class="main">
<view class='action'>
<icon class='icon-locationfill text-orange text-xxl'/>
</view>
<view class='content shadow'>
喵星球，喵喵市
</view>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class='date'>13:23</view>
</item>
<item>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
<view class="main">
<view class='content shadow'>
@#$^&**
</view>
<view class='action text-grey'>
<icon class='icon-warnfill text-red text-xxl'/> <text class='text-sm margin-left-sm'>翻译错误</text>
</view>
</view>
<view class='date'>13:23</view>
</item>
</chat>
<bar class="foot input">
<view class='action'>
<icon class='icon-sound text-grey'/>
</view>
<input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
<view class='action'>
<icon class='icon-emojifill text-grey'/>
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>
demo/pages/component/chat/chat.wxss
+3
View File
@@ -0,0 +1,3 @@
page{
padding-bottom: 60px;
}
demo/pages/component/form/form.js
+147
View File
@@ -0,0 +1,147 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
index: null,
picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
multiArray: [
['无脊柱动物', '脊柱动物'],
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
['猪肉绦虫', '吸血虫']
],
objectMultiArray: [
[
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
], [
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
], [
{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
time: '12:01',
date: '2018-12-25',
region: ['广东省', '广州市', '海珠区'],
},
PickerChange(e) {
console.log(e);
this.setData({
index: e.detail.value
})
},
MultiChange (e) {
this.setData({
multiIndex: e.detail.value
})
},
MultiColumnChange(e) {
let data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
break;
}
this.setData(data);
},
TimeChange(e) {
this.setData({
time: e.detail.value
})
},
DateChange (e) {
this.setData({
date: e.detail.value
})
},
RegionChange: function (e) {
this.setData({
region: e.detail.value
})
},
})
demo/pages/component/form/form.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/component/form/form.wxml
+175
View File
@@ -0,0 +1,175 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 表单
</navigator>
</bar>
</custom>
<form>
<form-group class="margin-top">
<view class='title'>邮件</view>
<input placeholder="两字短标题" class='radius' name='input'></input>
</form-group>
<form-group>
<view class='title'>输入框</view>
<input placeholder="三字标题" class='radius' name='input'></input>
</form-group>
<form-group>
<view class='title'>收货地址</view>
<input placeholder="统一标题的宽度" class='radius' name='input'></input>
</form-group>
<form-group>
<view class='title'>收货地址</view>
<input placeholder="输入框带个图标" class='radius' name='input'></input>
<icon class='icon-locationfill text-orange' />
</form-group>
<form-group>
<view class='title'>验证码</view>
<input placeholder="输入框带个按钮" class='radius' name='input'></input>
<button class='bg-green shadow'>验证码</button>
</form-group>
<form-group>
<view class='title'>手机号码</view>
<input placeholder="输入框带标签" class='radius' name='input'></input>
<capsule class="radius">
<tag class='bg-blue '>
+86
</tag>
<tag class="line-blue">
中国大陆
</tag>
</capsule>
</form-group>
<form-group class="margin-top">
<view class='title'>普通选择</view>
<picker bindchange="PickerChange" value="{{index}}" range="{{picker}}">
<view class="picker">
{{index?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
</view>
</picker>
</form-group>
<form-group>
<view class='title'>多列选择</view>
<picker mode="multiSelector" bindchange="MultiChange" bindcolumnchange="MultiColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</form-group>
<form-group>
<view class='title'>时间选择</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="TimeChange">
<view class="picker">
{{time}}
</view>
</picker>
</form-group>
<form-group>
<view class='title'>日期选择</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="DateChange">
<view class="picker">
{{date}}
</view>
</picker>
</form-group>
<form-group>
<view class='title'>地址选择</view>
<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</form-group>
<form-group class="margin-top">
<view class='title'>开关选择</view>
<switch class='sm'></switch>
</form-group>
<form-group>
<view class='title'>大号开关</view>
<switch class=''></switch>
</form-group>
<form-group>
<view class='title'>定义颜色</view>
<switch class='red sm' checked/>
</form-group>
<form-group>
<view class='title'>定义图标</view>
<switch class='switch-sex sm' checked/>
</form-group>
<form-group>
<view class='title'>方形开关</view>
<switch class='orange radius sm' checked/>
</form-group>
<radio-group class="block">
<form-group class="margin-top">
<view class='title'>单选操作(radio)</view>
<radio checked />
</form-group>
<form-group>
<view class='title'>定义尺寸</view>
<radio class='sm' />
</form-group>
<form-group>
<view class='title'>定义样式</view>
<radio class='radio' />
</form-group>
<form-group>
<view class='title'>定义颜色</view>
<view>
<radio class='blue radio' />
<radio class='red margin-left-sm' />
</view>
</form-group>
</radio-group>
<form-group class="margin-top">
<view class='title'>复选选操作(checkbox)</view>
<checkbox></checkbox>
</form-group>
<form-group>
<view class='title'>定义尺寸</view>
<checkbox class='sm' checked></checkbox>
</form-group>
<form-group>
<view class='title'>定义形状</view>
<checkbox class='round' checked></checkbox>
</form-group>
<form-group>
<view class='title'>定义颜色</view>
<checkbox class='round blue' checked></checkbox>
</form-group>
<form-group class="margin-top">
<view class="grid col-3 grid-square flex-sub">
<view class="padding-xs bg-img" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);">
</view>
<view class="padding-xs bg-img" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<tag class="bg-red">
<icon class='icon-close'></icon>
</tag>
</view>
<view class="padding-xs solids">
<icon class='icon-cameraadd'></icon>
</view>
</view>
</form-group>
<form-group class="margin-top" wx:hide="{{modalName==null}}">
<textarea placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class='placeholder'></textarea>
</form-group>
<form-group class="top" wx:hide="{{modalName==null}}">
<view class='title'>点文本框</view>
<textarea placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class='placeholder'></textarea>
</form-group>
<!--
<form-group class="margin-top">
<view class='title'>多级联动</view>
<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</form-group> -->
</form>
demo/pages/component/form/form.wxss
+3
View File
@@ -0,0 +1,3 @@
form-group .title {
min-width: calc(4em + 15px);
}
demo/pages/component/home/home.js
+17
View File
@@ -0,0 +1,17 @@
Page({
data: {
elements: [
{ title: '操作条', name: 'bar', color: 'purple', icon: 'vipcard' },
{ title: '导航栏 ', name: 'nav', color: 'mauve', icon: 'formfill' },
{ title: '列表', name: 'list', color: 'pink', icon: 'list' },
{ title: '卡片', name: 'card', color: 'brown', icon: 'newsfill' },
{ 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: 'modal', color: 'grey', icon: 'squarecheckfill' },
],
},
onLoad: function () {
},
})
demo/pages/component/home/home.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/component/home/home.wxml
+8
View File
@@ -0,0 +1,8 @@
<image src='/images/componentBg.png' mode='widthFix' class='response'></image>
<view class='nav-list'>
<navigator hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" style='animation: show {{(index+1)*0.2+1}}s 1;-webkit-animation: show {{(index+1)*0.2+1}}s 1;' wx:for="{{elements}}" wx:key>
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<icon class='icon-{{item.icon}}'/>
</navigator>
</view>
demo/pages/component/home/home.wxss
View File
demo/pages/component/list/list.js
+13
View File
@@ -0,0 +1,13 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
skin: false
},
switchSex: function(e) {
this.setData({
skin: e.detail.value
});
},
})
demo/pages/component/list/list.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/component/list/list.wxml
+432
View File
@@ -0,0 +1,432 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/> 列表
</navigator>
</bar>
</custom>
<view class="page {{skin?' invert ':' '}}">
<list class="grid col-3">
<item>
<icon class='icon-cardboardfill text-red'/>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
</icon>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text>帮助</text>
</item>
<item>
<icon class='icon-servicefill text-pink'/>
<text>反馈</text>
</item>
</list>
<list class="grid col-4">
<item>
<icon class='icon-cardboardfill text-red'/>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
</icon>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text>帮助</text>
</item>
</list>
<list class="grid no-border col-4">
<item>
<icon class='icon-cardboardfill text-red'/>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
</icon>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text>帮助</text>
</item>
</list>
<list class="grid col-5 no-border">
<item>
<icon class='icon-cardboardfill text-red'>
<tag class="badge">99+</tag>
</icon>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
</icon>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text>帮助</text>
</item>
<item>
<icon class='icon-commandfill text-purple'/>
<text>问答</text>
</item>
<item>
<icon class='icon-brandfill text-mauve'/>
<text>版权</text>
</item>
</list>
<list class="menu no-padding">
<item>
<view class='content'>
<view>
<icon class='icon-clothesfill text-blue'/> 皮肤设置</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill'/> 皮肤需要付费购买</view>
</view>
<view class='action'>
<switch class='switch-sex sm' bindchange="switchSex" />
</view>
</item>
<item>
<view class='content'>
<view>
<icon class='icon-musicfill text-red'/> 声音控制</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill'/> 需要获得系统权限</view>
</view>
<view class='action'>
<switch class='switch-music' />
</view>
</item>
</list>
<list class="menu menu-avatar inverts">
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill text-red'/> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<tag class="round bg-grey sm">5</tag>
</view>
</item>
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<tag class="badge">99+</tag>
</avatar>
<view class='content'>
<view class='text-grey'>文晓港
<tag class="round bg-orange sm">SVIP</tag>
</view>
<view class='text-gray text-sm'>
<icon class='icon-redpacket_fill text-red'/> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<icon class='icon-notice_forbid_fill text-gray'/>
</view>
</item>
</list>
<list class="menu menu-avatar no-padding">
<item class="">
<avatar class="radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<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>
<tag class="round bg-red sm">5</tag>
</view>
</item>
<item class="grayscale">
<avatar class="radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<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>
<tag class="round bg-red sm">5</tag>
</view>
</item>
<item class="cur">
<avatar class="radius lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);">
<tag class="badge"></tag>
</avatar>
<view class='content'>
<view>喵星人互动群
<tag class="round bg-orange sm">6人</tag>
</view>
<view class='text-gray text-sm'>
喵星酱：
<icon class='icon-picfill text-orange'/> 图片传输中...</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<icon class='icon-notice_forbid_fill text-gray'/>
</view>
</item>
</list>
<list class="menu">
<item>
<view class='content'>
<icon class='icon-circlefill text-grey'/>
<text class='text-grey'>默认</text>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-emojifill text-red'/>
<text class='text-grey'>头像</text>
</view>
<view class='action'>
<avatar class="sm round">
<icon class='icon-people'/>
</avatar>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-emojiflashfill text-pink'/>
<text class='text-grey'>头像组</text>
</view>
<view class='action'>
<avatar-group>
<avatar class="round sm" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></avatar>
<avatar class="round sm" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<avatar class="round sm" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
<avatar class="round sm" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
</avatar-group>
<text class='text-grey text-sm'>4 人</text>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-crown text-green'/>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='round bg-green sm'>
<icon class='icon-upload'/> 上传</button>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-crownfill text-green'/>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='round bg-blue'>
<icon class='icon-down'/> 下载</button>
</view>
</item>
</list>
<list class="menu">
<item class="arrow">
<view class='content'>
<icon class='icon-roundrightfill text-grey'/>
<text class='text-grey'>箭头</text>
</view>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-tagfill text-red'/>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<tag class="round bg-orange light">音乐</tag>
<tag class="round bg-olive light">电影</tag>
<tag class="round bg-blue light">旅行</tag>
</view>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-warn text-green'/>
<text class='text-grey'>文本</text>
</view>
<view class='action'>
<text class='text-grey text-sm'>小目标还没有实现！</text>
</view>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-warnfill text-green'/>
<text class='text-grey'>文本</text>
<text class='text-grey text-sm margin-left-sm'>小目标还没有实现！</text>
</view>
</item>
</list>
<list class="menu no-padding">
<item>
<view class='content'>
<icon class='icon-radiobox text-orange'/>
<text class='text-grey'>徽章</text>
</view>
<view class='action'>
<tag class='bg-red round'></tag>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-tagfill text-olive'/>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<tag class='bg-olive round'>9</tag>
</view>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-radioboxfill text-blue'/>
<text class='text-grey'>胶囊</text>
</view>
<view class='action'>
<capsule class="round">
<tag class='bg-blue'>
<icon class='icon-locationfill'/>
</tag>
<tag class="line-blue">
广州
</tag>
</capsule>
</view>
</item>
</list>
<list class="menu no-padding card-menu margin-bottom-xl">
<item>
<view class='content'>
<icon class='icon-radiobox text-orange'/>
<text class='text-grey'>徽章</text>
</view>
<view class='action'>
<tag class='bg-red round'></tag>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-tagfill text-olive'/>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<tag class='bg-olive round'>9</tag>
</view>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-radioboxfill text-blue'/>
<text class='text-grey'>胶囊</text>
</view>
<view class='action'>
<capsule class="round">
<tag class='bg-blue'>
<icon class='icon-locationfill'/>
</tag>
<tag class="line-blue">
广州
</tag>
</capsule>
</view>
</item>
</list>
</view>
demo/pages/component/list/list.wxss
+37
View File
@@ -0,0 +1,37 @@
.page {
background: #f1f1f1;
}
.switch-sex::after {
content: "\e716";
}
.switch-sex::before {
content: "\e7a9";
}
.switch-music::after {
content: "\e66a";
}
.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;
}
demo/pages/component/modal/modal.js
+18
View File
@@ -0,0 +1,18 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
});
demo/pages/component/modal/modal.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/component/modal/modal.wxml
+123
View File
@@ -0,0 +1,123 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 模态窗口
</navigator>
</bar>
</custom>
<bar class="">
<view class='action'>
<icon class='icon-titles text-orange ' /> 模态窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
</view>
</bar>
<modal-box class="{{modalName=='Modal'?'show':''}}">
<dialog>
<bar class="justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
</view>
</bar>
<view class='padding-xl'>
Modal 内容。
</view>
</dialog>
</modal-box>
<bar class=" margin-top">
<view class='action'>
<icon class='icon-titles text-orange ' /> 底部窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
</view>
</bar>
<modal-box class="bottom-modal {{modalName=='bottomModal'?'show':''}}">
<dialog>
<bar class="">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
</bar>
<view class='padding-xl'>
Modal 内容。
</view>
</dialog>
</modal-box>
<bar class=" margin-top">
<view class='action'>
<icon class='icon-titles text-orange ' /> 对话窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
<button class='bg-blue shadow margin-left' bindtap="showModal" data-target="DialogModal2">Dialog</button>
</view>
</bar>
<modal-box class="{{modalName=='DialogModal1'?'show':''}}">
<dialog>
<bar class="justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
</view>
</bar>
<view class='padding-xl'>
Modal 内容。
</view>
<bar class="justify-end">
<view class='action'>
<button class='line-green text-green' bindtap='hideModal'>取消</button>
<button class='bg-green margin-left' bindtap='hideModal'>确定</button>
</view>
</bar>
</dialog>
</modal-box>
<modal-box class="{{modalName=='DialogModal2'?'show':''}}">
<dialog>
<bar class="justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
</view>
</bar>
<view class='padding-xl'>
Modal 内容。
</view>
<bar>
<view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
<icon class='icon-moneybag'></icon>微信支付</view>
<view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>确定</view>
</bar>
</dialog>
</modal-box>
<bar class=" margin-top">
<view class='action'>
<icon class='icon-titles text-orange ' /> 图片窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
</view>
</bar>
<modal-box class="{{modalName=='Image'?'show':''}}">
<dialog>
<view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
<bar class="justify-end none-bg text-white">
<view class='action' bindtap='hideModal'>
<icon class='icon-close '></icon>
</view>
</bar>
</view>
<bar>
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>我知道了</view>
</bar>
</dialog>
</modal-box>
demo/pages/component/modal/modal.wxss
View File
demo/pages/component/nav/nav.js
+16
View File
@@ -0,0 +1,16 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
TabCur: 0,
scrollLeft:0
},
tabSelect(e) {
console.log(e);
this.setData({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id-1)*60
})
}
})
demo/pages/component/nav/nav.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/component/nav/nav.wxml
+87
View File
@@ -0,0 +1,87 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 导航栏
</navigator>
</bar>
</custom>
<view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='bg-grey padding margin text-center'>
Tab{{index}}
</view>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-titles text-orange ' /> 默认
</view>
</bar>
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
<item class="{{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</item>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-orange' /> 居中
</view>
</bar>
<scroll-view scroll-x class="bg-white nav text-center">
<item class="{{index==TabCur?'text-blue cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</item>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-orange' /> 平分
</view>
</bar>
<scroll-view scroll-x class="bg-white nav">
<view class='flex text-center'>
<item class="flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</item>
</view>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-orange' /> 背景
</view>
</bar>
<scroll-view scroll-x class="bg-red nav text-center">
<item class="{{index==TabCur?'text-white cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</item>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-orange' /> 图标
</view>
</bar>
<scroll-view scroll-x class="bg-green nav text-center">
<item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
<icon class='icon-camerafill'></icon> 数码
</item>
<item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
<icon class='icon-upstagefill'></icon> 排行榜
</item>
<item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
<icon class='icon-clothesfill'></icon> 皮肤
</item>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-orange' /> 定位
</view>
</bar>
<scroll-view scroll-x class="bg-green nav text-center">
<item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
<icon class='icon-camerafill'></icon> 数码
</item>
<item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
<icon class='icon-upstagefill'></icon> 排行榜
</item>
<item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
<icon class='icon-clothesfill'></icon> 皮肤
</item>
</scroll-view>
demo/pages/component/nav/nav.wxss
+1
View File
@@ -0,0 +1 @@
/* pages/component/nav/nav.wxss */
demo/pages/component/swiper/swiper.js
+104
View File
@@ -0,0 +1,104 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
cardCur: 0,
tower: [{
id: 0,
url: 'https://image.weilanwl.com/img/4x3-1.jpg'
}, {
id: 1,
url: 'https://image.weilanwl.com/img/4x3-2.jpg'
}, {
id: 2,
url: 'https://image.weilanwl.com/img/4x3-3.jpg'
}, {
id: 3,
url: 'https://image.weilanwl.com/img/4x3-4.jpg'
}, {
id: 4,
url: 'https://image.weilanwl.com/img/4x3-2.jpg'
}, {
id: 5,
url: 'https://image.weilanwl.com/img/4x3-4.jpg'
}, {
id: 6,
url: 'https://image.weilanwl.com/img/4x3-2.jpg'
}]
},
onLoad() {
this.towerSwiper('tower');
// 初始化towerSwiper 传已有的数组名即可
},
DotStyle(e) {
this.setData({
DotStyle: e.detail.value
})
},
// cardSwiper
cardSwiper(e) {
this.setData({
cardCur: e.detail.current
})
},
// towerSwiper
// 初始化towerSwiper
towerSwiper(name) {
let list = this.data[name];
for (let i = 0; i < list.length; i++) {
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
list[i].mLeft = i - parseInt(list.length / 2)
}
this.setData({
towerList: list
})
},
// towerSwiper触摸开始
towerStart(e) {
this.setData({
towerStart: e.touches[0].pageX
})
},
// towerSwiper计算方向
towerMove(e) {
this.setData({
direction: e.touches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left'
})
},
// towerSwiper计算滚动
towerEnd(e) {
let direction = this.data.direction;
let list = this.data.towerList;
if (direction == 'right') {
let mLeft = list[0].mLeft;
let zIndex = list[0].zIndex;
for (let i = 1; i < list.length; i++) {
list[i - 1].mLeft = list[i].mLeft
list[i - 1].zIndex = list[i].zIndex
}
list[list.length - 1].mLeft = mLeft;
list[list.length - 1].zIndex = zIndex;
this.setData({
towerList: list
})
} else {
let mLeft = list[list.length - 1].mLeft;
let zIndex = list[list.length - 1].zIndex;
for (let i = list.length - 1; i > 0; i--) {
list[i].mLeft = list[i - 1].mLeft
list[i].zIndex = list[i - 1].zIndex
}
list[0].mLeft = mLeft;
list[0].zIndex = zIndex;
this.setData({
towerList: list
})
}
console.log(list);
},
});
demo/pages/component/swiper/swiper.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/component/swiper/swiper.wxml
+41
View File
@@ -0,0 +1,41 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 轮播图
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-pink' /> 全屏限高轮播
</view>
<view class='action'>
<switch class='sm' bindchange='DotStyle'></switch>
</view>
</bar>
<swiper class="screen-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
<swiper-item wx:for="{{4}}" wx:key>
<image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill' />
</swiper-item>
</swiper>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-pink' /> 卡片式轮播
</view>
</bar>
<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
<swiper-item wx:for="{{4}}" wx:key class="{{cardCur==index?'cur':''}}">
<view class='bg-img shadow-blur' style="background-image:url(https://image.weilanwl.com/img/4x3-{{index+1}}.jpg)"></view>
</swiper-item>
</swiper>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-pink' /> 堆叠式轮播
</view>
</bar>
<view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">
<view class='tower-item {{item.zIndex==1?"none":""}}' wx:for="{{towerList}}" wx:key style='transform: scale({{0.5+item.zIndex/10}});margin-left:{{item.mLeft*100-150}}rpx;z-index:{{item.zIndex}}'>
<view class='bg-img shadow-blur' style="background-image:url({{item.url}})"></view>
</view>
</view>
demo/pages/component/swiper/swiper.wxss
+1
View File
@@ -0,0 +1 @@
/* pages/component/swiper/swiper.wxss */
demo/pages/component/timeline/timeline.js
+9
View File
@@ -0,0 +1,9 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
onLoad: function () { },
});
demo/pages/component/timeline/timeline.json
+1
View File
@@ -0,0 +1 @@
{}
demo/pages/component/timeline/timeline.wxml
+90
View File
@@ -0,0 +1,90 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/>
时间轴
</navigator>
</bar>
</custom>
<timeline>
<time>昨天</time>
<item class='cur icon-noticefill'>
<view class="content bg-green shadow-blur">
<text>22:22</text> 【广州市】快件已到达地球
</view>
</item>
<item class='text-red icon-attentionforbidfill'>
<view class="content bg-red shadow-blur">
这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
</view>
</item>
<item class='text-grey icon-evaluate_fill'>
<view class="content bg-grey shadow-blur">
这是第一次，我家的铲屎官走了这么久。
</view>
</item>
<item class='text-blue'>
<view class="bg-blue content">
<text>20:00</text> 【月球】快件已到达月球，准备发往地球
</view>
<view class="bg-cyan content">
<text>10:00</text> 【银河系】快件已到达银河系，准备发往月球
</view>
</item>
</timeline>
<timeline>
<time>06-17</time>
<item>
<view class="content">
<text>01:30</text> 【喵星】 MX-12138 已揽收，准备发往银河系
</view>
</item>
</timeline>
<timeline>
<time>06-17</time>
<item>
<view class="content">
<capsule class="radius">
<tag class="bg-cyan">上午</tag>
<tag class="line-cyan">10:00</tag>
</capsule>
<view class='margin-top'>这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
</view>
</item>
<item class='text-blue'>
<view class="bg-blue shadow-blur content">
<list class="menu menu-avatar radius">
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill text-red'/> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<tag class="round grey sm">5</tag>
</view>
</item>
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<tag class="badge">99+</tag>
</avatar>
<view class='content'>
<view class='text-grey'>文晓港
<tag class="round orange sm">SVIP</tag>
</view>
<view class='text-gray text-sm'>
<icon class='icon-redpacket_fill text-red'/> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<icon class='icon-notice_forbid_fill text-gray'/>
</view>
</item>
</list>
</view>
</item>
</timeline>
demo/pages/component/timeline/timeline.wxss
+1
View File
@@ -0,0 +1 @@
/* pages/component/timeline/timeline.wxss */
demo/pages/include/custom/custom.js
+23
View File
@@ -0,0 +1,23 @@
// pages/include/custom/custom.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
demo/pages/include/custom/custom.json
+4
View File
@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}
demo/pages/include/custom/custom.wxml
View File
demo/pages/include/custom/custom.wxss
+1
View File
@@ -0,0 +1 @@
@import "../../../app.wxss";

Some files were not shown because too many files have changed in this diff Show More