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

v2.1.2

Browse Source
This commit is contained in:
Weilanwl
2019-03-28 23:08:35 +08:00
parent 89817a88e8
commit bb889509c0
108 changed files with 3446 additions and 4082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/.gitattributes vendored
View File

@@ -1,2 +0,0 @@
# Auto detect text files and perform LF normalization
* text=auto

37
demo/app.json
View File

@@ -1,5 +1,6 @@
{
"pages": [
"pages/index/index",
"pages/basics/home/home",
"pages/basics/layout/layout",
"pages/basics/button/button",
@@ -33,7 +34,6 @@
"pages/about/test/list",
"pages/about/test/filter",
"pages/about/home/home",
"custom-tab-bar/index",
"pages/plugin/drawer/drawer",
"pages/plugin/verticalnav/verticalnav"
],
@@ -43,38 +43,7 @@
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
},
"usingComponents": {},
"tabBar": {
"custom": true,
"color": "#aaa",
"selectedColor": "#39b54a",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/basics/home/home",
"iconPath": "/images/tabbar/basics.png",
"selectedIconPath": "/images/tabbar/basics_cur.png",
"text": "基础"
},
{
"pagePath": "pages/component/home/home",
"iconPath": "/images/tabbar/component.png",
"selectedIconPath": "/images/tabbar/component_cur.png",
"text": "组件"
},
{
"pagePath": "pages/plugin/home/home",
"iconPath": "/images/tabbar/plugin.png",
"selectedIconPath": "/images/tabbar/plugin_cur.png",
"text": "扩展"
},
{
"pagePath": "pages/about/home/home",
"iconPath": "/images/tabbar/about.png",
"selectedIconPath": "/images/tabbar/about_cur.png",
"text": "关于"
}
]
"usingComponents": {
"cu-custom":"/colorui/components/cu-custom"
}
}

36
demo/app.wxss
View File

@@ -1,8 +1,8 @@
@import "icon.wxss";
@import "colorui.wxss";
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
.cu-modal.show {
z-index: 99999;
.scrollPage {
height: 100vh;
}
.nav-list {
@@ -105,31 +105,3 @@
.text-light {
font-weight: 300;
}
@keyframes show {
0% {
transform: translateY(-50px);
}
60% {
transform: translateY(40rpx);
}
100% {
transform: translateY(0px);
}
}
@-webkit-keyframes show {
0% {
transform: translateY(-50px);
}
60% {
transform: translateY(40rpx);
}
100% {
transform: translateY(0px);
}
}

184
demo/colorui/animation.wxss Normal file
View File

@@ -0,0 +1,184 @@
/*
Animation 微动画
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
*/
/* css 滤镜 控制黑白底色gif的 */
.gif-black{
mix-blend-mode: screen;
}
.gif-white{
mix-blend-mode: multiply;
}
/* Animation css */
[class*=animation-] {
animation-duration: .5s;
animation-timing-function: ease-out;
animation-fill-mode: both
}
.animation-fade {
animation-name: fade;
animation-duration: .8s;
animation-timing-function: linear
}
.animation-scale-up {
animation-name: scale-up
}
.animation-scale-down {
animation-name: scale-down
}
.animation-slide-top {
animation-name: slide-top
}
.animation-slide-bottom {
animation-name: slide-bottom
}
.animation-slide-left {
animation-name: slide-left
}
.animation-slide-right {
animation-name: slide-right
}
.animation-shake {
animation-name: shake
}
.animation-reverse {
animation-direction: reverse
}
@keyframes fade {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes scale-up {
0% {
opacity: 0;
transform: scale(.2)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes scale-down {
0% {
opacity: 0;
transform: scale(1.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes slide-top {
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes slide-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0)
}
10% {
transform: translateX(-9px)
}
20% {
transform: translateX(8px)
}
30% {
transform: translateX(-7px)
}
40% {
transform: translateX(6px)
}
50% {
transform: translateX(-5px)
}
60% {
transform: translateX(4px)
}
70% {
transform: translateX(-3px)
}
80% {
transform: translateX(2px)
}
90% {
transform: translateX(-1px)
}
}
@keyframes slide-left {
0% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slide-right {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}

54
demo/colorui/components/cu-custom.js Normal file
View File

@@ -0,0 +1,54 @@
const app = getApp();
Component({
/**
* 组件的一些选项
*/
options: {
addGlobalClass: true,
multipleSlots: true
},
/**
* 组件的对外属性
*/
properties: {
bgColor: {
type: String,
default: ''
},
isCustom: {
type: [Boolean, String],
default: false
},
isBack: {
type: [Boolean, String],
default: false
},
bgImage: {
type: String,
default: ''
},
},
/**
* 组件的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
Custom: app.globalData.Custom
},
/**
* 组件的方法列表
*/
methods: {
BackPage() {
wx.navigateBack({
delta: 1
});
},
toHome(){
wx.reLaunch({
url: '/pages/index/index',
})
}
}
})

4
demo/colorui/components/cu-custom.json Normal file
View File

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

16
demo/colorui/components/cu-custom.wxml Normal file
View File

@@ -0,0 +1,16 @@
<view class="cu-custom" style="height:{{CustomBar}}px">
<view class="cu-bar fixed {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;{{bgImage?'background-image:url(' + bgImage+')':''}}">
<view class="action" bindtap="BackPage" wx:if="{{isBack}}">
<text class="icon-back"></text>
<slot name="backText"></slot>
</view>
<view class="action border-custom" wx:if="{{isCustom}}" style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)">
<text class="icon-back" bindtap="BackPage"></text>
<text class="icon-homefill" bindtap="toHome"></text>
</view>
<view class="content" style="top:{{StatusBar}}px">
<slot name="content"></slot>
</view>
<slot name="right"></slot>
</view>
</view>

1
demo/colorui/components/cu-custom.wxss Normal file
View File

@@ -0,0 +1 @@
/* colorui/components/cu-custom.wxss */

8
demo/icon.wxss → demo/colorui/icon.wxss
View File

File diff suppressed because one or more lines are too long

855
demo/colorui.wxss → demo/colorui/main.wxss
View File

File diff suppressed because it is too large Load Diff

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

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

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

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

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

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

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

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

@@ -1,11 +1,4 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 关于
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-green" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">关于</view></cu-custom>
<view class='margin-xl bg-white padding-xl radius shadow-lg'>
<view class='text-center margin-bottom text-lg text-grey'>关于ColorUI组件库</view>
<view class='text-content'>

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

@@ -1,39 +1,43 @@
Component({
options: {
addGlobalClass: true,
},
data: {
starCount: 0,
forksCount: 0,
visitTotal: 0,
},
methods: {
onLoad(options) {
let that = this;
wx.showLoading({
title: '数据加载中',
mask: true,
})
let i = 0;
numDH();
function numDH() {
if (i < 20) {
setTimeout(function() {
that.setData({
visitTotal: i,
forksCount: i,
visitTotal: i
})
i++
numDH();
}, 20)
} else {
attached() {
console.log("success")
let that = this;
wx.showLoading({
title: '数据加载中',
mask: true,
})
let i = 0;
numDH();
function numDH() {
if (i < 20) {
setTimeout(function () {
that.setData({
starCount: that.coutNum(999),
forksCount: that.coutNum(8888),
visitTotal: that.coutNum(77777)
starCount: i,
forksCount: i,
visitTotal: i
})
}
i++
numDH();
}, 20)
} else {
that.setData({
starCount: that.coutNum(999),
forksCount: that.coutNum(8888),
visitTotal: that.coutNum(77777)
})
}
wx.hideLoading()
},
}
wx.hideLoading()
},
methods: {
coutNum(e) {
if (e > 1000 && e < 10000) {
e = (e / 1000).toFixed(1) + 'k'
@@ -70,15 +74,5 @@ Component({
current: 'https://image.weilanwl.com/color2.0/zanCode.jpg' // 当前显示图片的http链接
})
},
},
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 3
})
}
}
}
})

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

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

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

@@ -1,67 +1,68 @@
<view class='UCenter-bg'>
<image src='/images/logo.png' class='png' mode='widthFix'></image>
<view class='text-xl'>ColorUI组件库
<text class='text-df'>v2.0</text>
</view>
<view class='margin-top-sm'>
<text>By:文晓港</text>
</view>
<image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-wave'></image>
</view>
<view class='padding flex text-center text-grey bg-white shadow-warp'>
<view class='flex flex-sub flex-direction solid-right'>
<view class="text-xxl text-orange">{{visitTotal}}</view>
<scroll-view scroll-y class="scrollPage">
<view class="UCenter-bg">
<image src="/images/logo.png" class="png" mode="widthFix"></image>
<view class="text-xl">ColorUI组件库
<text class="text-df">v2.0</text>
</view>
<view class="margin-top-sm">
<text class='icon-attentionfill'></text> View</view>
<text>By:文晓港</text>
</view>
<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-wave"></image>
</view>
<view class='flex flex-sub flex-direction solid-right'>
<view class="text-xxl text-blue">{{starCount}}</view>
<view class="margin-top-sm">
<text class='icon-favorfill'></text> Star</view>
</view>
<view class='flex flex-sub flex-direction'>
<view class="text-xxl text-green">{{forksCount}}</view>
<view class="margin-top-sm">
<text class='icon-fork'></text> Fork</view>
</view>
</view>
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
<view class="cu-item arrow">
<view class='content' bindtap='CopyLink' data-link='https://github.com/weilanwl/ColorUI'>
<text class='icon-github text-grey'></text>
<text class='text-grey'>GitHub</text>
<view class="padding flex text-center text-grey bg-white shadow-warp">
<view class="flex flex-sub flex-direction solid-right">
<view class="text-xxl text-orange">{{visitTotal}}</view>
<view class="margin-top-sm">
<text class="icon-attentionfill"></text> View</view>
</view>
<view class="flex flex-sub flex-direction solid-right">
<view class="text-xxl text-blue">{{starCount}}</view>
<view class="margin-top-sm">
<text class="icon-favorfill"></text> Star</view>
</view>
<view class="flex flex-sub flex-direction">
<view class="text-xxl text-green">{{forksCount}}</view>
<view class="margin-top-sm">
<text class="icon-fork"></text> Fork</view>
</view>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../about/about' hover-class='none'>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>关于ColorUI组件库</text>
</navigator>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../log/log' hover-class='none'>
<text class='icon-formfill text-green'></text>
<text class='text-grey'>日志</text>
</navigator>
</view>
<view class="cu-item arrow">
<view class='content' bindtap="showQrcode">
<text class='icon-appreciatefill text-red'></text>
<text class='text-grey'>赞赏支持</text>
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
<view class="cu-item arrow">
<view class="content" bindtap="CopyLink" data-link="https://github.com/weilanwl/ColorUI">
<text class="icon-github text-grey"></text>
<text class="text-grey">GitHub</text>
</view>
</view>
<view class="cu-item arrow">
<navigator class="content" url="/pages/about/about/about" hover-class="none">
<image src="/images/logo.png" class="png" mode="aspectFit"></image>
<text class="text-grey">关于ColorUI组件库</text>
</navigator>
</view>
<view class="cu-item arrow">
<navigator class="content" url="/pages/about/log/log" hover-class="none">
<text class="icon-formfill text-green"></text>
<text class="text-grey">日志</text>
</navigator>
</view>
<view class="cu-item arrow">
<view class="content" bindtap="showQrcode">
<text class="icon-appreciatefill text-red"></text>
<text class="text-grey">赞赏支持</text>
</view>
</view>
<view class="cu-item arrow">
<button class="cu-btn content" open-type="feedback">
<text class="icon-writefill text-cyan"></text>
<text class="text-grey">意见反馈</text>
</button>
</view>
<view class="cu-item arrow">
<navigator class="content" url="/pages/about/test/list" hover-class="none">
<text class="icon-creativefill text-orange"></text>
<text class="text-grey">Bug测试</text>
</navigator>
</view>
</view>
<view class="cu-item arrow">
<button class='cu-btn content' open-type='feedback'>
<text class='icon-writefill text-cyan'></text>
<text class='text-grey'>意见反馈</text>
</button>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../test/list' hover-class='none'>
<text class='icon-creativefill text-orange'></text>
<text class='text-grey'>Bug测试</text>
</navigator>
</view>
</view>
<view class='cu-tabbar-height'></view>
<view class="cu-tabbar-height"></view>
</scroll-view>

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

@@ -1,18 +1,35 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> <text class='text-cut'>日志</text>
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-green" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">日志</view></cu-custom>
<view class="cu-timeline">
<view class='cu-item text-green'>
<view class="cu-item text-green">
<view class="bg-gradual-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.1.2</view>
<view class="cu-tag line-white">2019/03/28</view>
</view>
<view class="margin-top-sm text-content">
<view>1.图标修改了字体名称，避免冲突</view>
<view>2.优化了消息列表</view>
<view>3.更改自定义Tabbar的方案</view>
<view>4.修复列表组件样式</view>
<view>5.轮播图支持视频(ios/兼容差，暂时去掉)</view>
<view>6.优化堆叠轮播图</view>
<view>7.优化聊天页输入框聚焦问题</view>
<view>8.表单多图上传优化，文本框优化</view>
<view>9.优化全屏抽屉扩展</view>
<view>10.全屏垂直导航支持双向联动</view>
<view>11.优化源码细节，精简代码</view>
<view></view>
<view>*ColorUI支持UniApp开发了!UniApp版本请移步官方插件市场 https://ext.dcloud.net.cn/plugin?id=239</view>
</view>
</view>
</view>
<view class="cu-item text-green">
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.7</view>
<view class="cu-tag line-white">2019/02/25</view>
</view>
<view class='margin-top-sm text-content'>
<view class="margin-top-sm text-content">
<view>1.新增操作条胶囊样式，优化全屏操作条</view>
<view>2.优化iPhone X的Tabbar样式</view>
<view>3.新增全屏抽屉插件</view>
@@ -20,13 +37,13 @@
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="cu-item text-green">
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.6</view>
<view class="cu-tag line-white">2019/02/09</view>
</view>
<view class='margin-top-sm text-content'>
<view class="margin-top-sm text-content">
<view>1.修复行距带来的垂直不居中问题</view>
<view>2.优化操作条组件，新增多种样式</view>
<view>3.优化背景颜色（某些组件的默认背景调整,移除一些important）</view>
@@ -35,13 +52,13 @@
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="cu-item text-green">
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.5</view>
<view class="cu-tag line-white">2019/01/13</view>
</view>
<view class='margin-top-sm text-content'>
<view class="margin-top-sm text-content">
<view>1.修复时间线图标显示问题</view>
<view>2.switch、radio、checkbox单位改成px，抛弃小尺寸</view>
<view>3.更新多种窗口组件</view>
@@ -52,13 +69,13 @@
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="cu-item text-green">
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.4</view>
<view class="cu-tag line-white">2019/01/10</view>
</view>
<view class='margin-top-sm text-content'>
<view class="margin-top-sm text-content">
<view>1.抛弃标签选择器，改成类名选择器</view>
<view>2.动画改成Gif，并新增动画</view>
<view>3.修复一些图标错位问题</view>
@@ -67,13 +84,13 @@
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="cu-item text-green">
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.3</view>
<view class="cu-tag line-white">2019/01/06</view>
</view>
<view class='margin-top-sm text-content'>
<view class="margin-top-sm text-content">
<view>1.修复一些单位错误（带输入框的操作条）</view>
<view>2.纠正一些单词拼写...</view>
<view>3.抛弃icon标签，改回text标签的写法</view>
@@ -83,13 +100,13 @@
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="cu-item text-green">
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.2</view>
<view class="cu-tag line-white">2018/12/24</view>
</view>
<view class='margin-top-sm text-content'>
<view class="margin-top-sm text-content">
<view>1.首页增加分享</view>
<view>2.卡片页修复switch开关问题</view>
<view>3.优化首页动画效果（ios表现不佳）</view>
@@ -101,13 +118,13 @@
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="cu-item text-green">
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.1</view>
<view class="cu-tag line-white">2018/12/20</view>
</view>
<view class='margin-top-sm text-content'>2.0新版本上线</view>
<view class="margin-top-sm text-content">2.0新版本上线</view>
</view>
</view>
</view>

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

@@ -1,9 +1,5 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
scrollLeft: 0,
TabCur: 0,
},
@@ -13,5 +9,5 @@ Page({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
})
},
});
}
})

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

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

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

@@ -1,9 +1,5 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
scrollLeft: 0,
TabCur: 0,
},
@@ -13,5 +9,5 @@ Page({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
})
},
});
}
})

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

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

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

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

16
demo/pages/basics/avatar/avatar.js
View File

@@ -1,14 +1,12 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {},
pageBack() {
wx.navigateBack({
delta: 1
});
avatar: [
'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
],
}
});
})

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

@@ -1,29 +1,23 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 头像
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">头像</view></cu-custom>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>头像形状
<view class="action">
<text class="icon-title text-blue"></text>头像形状
</view>
</view>
<view class="padding">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class="cu-avatar radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="cu-avatar radius margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像尺寸
<view class="action">
<text class="icon-title text-blue"></text>头像尺寸
</view>
</view>
<view class="padding">
<view class="cu-avatar sm round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class="cu-avatar round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar lg round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class="cu-avatar xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
<view class="cu-avatar sm round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
<view class="cu-avatar lg round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
<view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
</view>
<view class="padding">
<view class="cu-avatar sm round margin-left bg-red"> A</view>
@@ -38,17 +32,17 @@
<text>wl</text>
</view>
<view class="cu-avatar xl round margin-left bg-red">
<text class='avatar-text'>网络</text>
<text class="avatar-text">网络</text>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>内嵌文字(图标)
<view class="action">
<text class="icon-title text-blue"></text>内嵌文字(图标)
</view>
</view>
<view class="padding">
<view class="cu-avatar radius">
<text class='icon-people'></text>
<text class="icon-people"></text>
</view>
<view class="cu-avatar radius margin-left">
<text>港</text>
@@ -56,33 +50,33 @@
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像颜色
<view class="action">
<text class="icon-title text-blue"></text>头像颜色
</view>
</view>
<view class="padding-sm">
<view class="cu-avatar round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key>
<text class='avatar-text'>{{item.name}}</text>
<text class="avatar-text">{{item.name}}</text>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像组
<view class="action">
<text class="icon-title text-blue"></text>头像组
</view>
</view>
<view class='padding'>
<view class="padding">
<view class="cu-avatar-group">
<view class="cu-avatar round lg" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
<view class="cu-avatar round lg" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);"></view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像标签
<view class="action">
<text class="icon-title text-blue"></text>头像标签
</view>
</view>
<view class='padding'>
<view class="cu-avatar round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);">
<view class="padding">
<view class="cu-avatar round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);">
<view class="cu-tag badge {{index%2==0?'icon-female bg-pink':'icon-male bg-blue'}}"></view>
</view>
</view>

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

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

9
demo/pages/basics/background/background.js
View File

@@ -1,11 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {},
ColorList: app.globalData.ColorList
}
})

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

@@ -1,130 +1,122 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 背景颜色
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">背景颜色</view>
</cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>深色背景
<view class="action">
<text class="icon-title text-blue"></text>深色背景
</view>
</view>
<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="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 class="margin-top-sm text-Abc">{{item.name}}</view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>淡色背景
<view class="action">
<text class="icon-title text-blue"></text>淡色背景
</view>
</view>
<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="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 class="margin-top-sm text-Abc">{{item.name}}</view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>渐变背景
<view class="action">
<text class="icon-title text-blue"></text>渐变背景
</view>
</view>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class='bg-gradual-red padding radius text-center shadow-blur'>
<view class="grid col-2 padding-sm">
<view class="padding-sm">
<view class="bg-gradual-red padding radius text-center shadow-blur">
<view class="text-lg">魅红</view>
<view class='margin-top-sm text-Abc'>#f43f3b - #ec008c</view>
<view class="margin-top-sm text-Abc">#f43f3b - #ec008c</view>
</view>
</view>
<view class='padding-sm'>
<view class='bg-gradual-orange padding radius text-center shadow-blur'>
<view class="padding-sm">
<view class="bg-gradual-orange padding radius text-center shadow-blur">
<view class="text-lg">鎏金</view>
<view class='margin-top-sm text-Abc'>#ff9700 - #ed1c24</view>
<view class="margin-top-sm text-Abc">#ff9700 - #ed1c24</view>
</view>
</view>
<view class='padding-sm'>
<view class='bg-gradual-green padding radius text-center shadow-blur'>
<view class="padding-sm">
<view class="bg-gradual-green padding radius text-center shadow-blur">
<view class="text-lg">翠柳</view>
<view class='margin-top-sm text-Abc'>#39b54a - #8dc63f</view>
<view class="margin-top-sm text-Abc">#39b54a - #8dc63f</view>
</view>
</view>
<view class='padding-sm'>
<view class='bg-gradual-blue padding radius text-center shadow-blur'>
<view class="padding-sm">
<view class="bg-gradual-blue padding radius text-center shadow-blur">
<view class="text-lg">靛青</view>
<view class='margin-top-sm text-Abc'>#0081ff - #1cbbb4</view>
<view class="margin-top-sm text-Abc">#0081ff - #1cbbb4</view>
</view>
</view>
<view class='padding-sm'>
<view class='bg-gradual-purple padding radius text-center shadow-blur'>
<view class="padding-sm">
<view class="bg-gradual-purple padding radius text-center shadow-blur">
<view class="text-lg">惑紫</view>
<view class='margin-top-sm text-Abc'>#9000ff - #5e00ff</view>
<view class="margin-top-sm text-Abc">#9000ff - #5e00ff</view>
</view>
</view>
<view class='padding-sm'>
<view class='bg-gradual-pink padding radius text-center shadow-blur'>
<view class="padding-sm">
<view class="bg-gradual-pink padding radius text-center shadow-blur">
<view class="text-lg">霞彩</view>
<view class='margin-top-sm text-Abc'>#ec008c - #6739b6</view>
<view class="margin-top-sm text-Abc">#ec008c - #6739b6</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>图片背景
<view class="action">
<text class="icon-title text-blue"></text>图片背景
</view>
</view>
<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 class="bg-img bg-mask padding-tb-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414rpx;">
<view class="padding-xl text-white">
<view class="padding-xs text-xl">
钢铁之翼
</view>
<view class='padding-xs'>
I Have a Date with Spring
<view class="padding-xs">
Only the guilty need fear me.
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>视频背景
<!-- <view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-blue"></text>视频背景
</view>
</view>
<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'>
开源是创新的动力之源
<view class="bg-video bg-mask flex align-center" style="height: 422rpx;">
<video src="https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm" 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-xxl text-bold">
暗裔剑魔
</cover-view>
<cover-view class='padding-xs'>
Open Source is the Power Source of Innovation
<cover-view class="padding-xs">
我必须连同希望一起毁坏……
</cover-view>
</cover-view>
</view>
</view> -->
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>透明背景(文字层)
<view class="action">
<text class="icon-title text-blue"></text>透明背景(文字层)
</view>
</view>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class="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 class="grid col-2">
<view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207rpx;">
<view class="bg-shadeTop padding padding-bottom-xl">
上面开始
</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 class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207rpx;">
<view class="bg-shadeBottom padding padding-top-xl flex-sub">
下面开始
</view>
</view>
</view>

6
demo/pages/basics/button/button.js
View File

@@ -1,8 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
SetShadow(e) {
@@ -14,5 +12,5 @@ Page({
this.setData({
bordersize: e.detail.value
})
},
});
}
})

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

@@ -1,99 +1,96 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 按钮
</navigator>
<navigator class='action' url='design' hover-class="none">
<text class='icon-skinfill'></text>
<text class="text-df">设计</text>
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">按钮</view>
</cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>按钮形状
<view class="action">
<text class="icon-title text-blue"></text>按钮形状
</view>
<navigator class="action" url="design" hover-class="none">
<text class="icon-skinfill"></text>
<text class="text-df">设计</text>
</navigator>
</view>
<view class="padding flex flex-wrap justify-between align-center bg-white">
<button class='cu-btn'>默认</button>
<button class='cu-btn round'>圆角</button>
<button class='cu-btn icon'>
<text class='icon-emojifill'></text>
<button class="cu-btn">默认</button>
<button class="cu-btn round">圆角</button>
<button class="cu-btn icon">
<text class="icon-emojifill"></text>
</button>
</view>
<view class="cu-bar margin-top bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>按钮尺寸
<view class="action">
<text class="icon-title text-blue"></text>按钮尺寸
</view>
</view>
<view class="padding flex flex-wrap justify-between align-center bg-white">
<button class='cu-btn round sm'>小尺寸</button>
<button class='cu-btn round'>默认</button>
<button class='cu-btn round lg'>大尺寸</button>
<button class="cu-btn round sm">小尺寸</button>
<button class="cu-btn round">默认</button>
<button class="cu-btn round lg">大尺寸</button>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>按钮颜色
<view class="action">
<text class="icon-title text-blue"></text>按钮颜色
</view>
<view class='action'>
<text class='text-df margin-right-sm'>阴影</text>
<switch class='sm' bindchange='SetShadow'></switch>
<view class="action">
<text class="text-df margin-right-sm">阴影</text>
<switch class="sm" bindchange="SetShadow"></switch>
</view>
</view>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
<button class='cu-btn round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
<view class="grid col-5 padding-sm">
<view class="margin-tb-sm text-center" wx:for="{{ColorList}}" wx:key>
<button class="cu-btn round bg-{{item.name}} {{shadow?'shadow':''}}">{{item.title}}</button>
</view>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>镂空按钮
<view class="action">
<text class="icon-title text-blue"></text>镂空按钮
</view>
<view class='action'>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked></radio>
<view class="action">
<radio-group bindchange="SetBorderSize">
<label class="margin-left-sm">
<radio class="blue sm radio" value="" checked></radio>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='s'></radio>
<label class="margin-left-sm">
<radio class="blue sm radio" value="s"></radio>
<text> 大</text>
</label>
</radio-group>
</view>
</view>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
<button class='cu-btn round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
<view class="grid col-5 padding-sm">
<view class="margin-tb-sm text-center" wx:for="{{ColorList}}" wx:key>
<button class="cu-btn round line{{bordersize?bordersize:''}}-{{item.name}} {{shadow?'shadow':''}}">{{item.title}}</button>
</view>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>块状按钮
<view class="action">
<text class="icon-title text-blue"></text>块状按钮
</view>
</view>
<view class="padding flex flex-direction">
<button class='cu-btn bg-grey lg'>玄灰</button>
<button class='cu-btn bg-red margin-tb-sm lg'>嫣红</button>
<button class="cu-btn bg-grey lg">玄灰</button>
<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>无效状态
<view class="action">
<text class="icon-title text-blue"></text>无效状态
</view>
</view>
<view class="padding">
<button class='cu-btn block bg-blue margin-tb-sm lg' disabled type=''>无效状态</button>
<button class='cu-btn block line-blue margin-tb-sm lg' disabled>无效状态</button>
<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>按钮加图标
<view class="action">
<text class="icon-title text-blue"></text>按钮加图标
</view>
</view>
<view class="padding-xl">
<button class='cu-btn block line-orange lg'>
<text class='icon-upload'></text> 图标</button>
<button class='cu-btn block bg-blue margin-tb-sm lg'>
<text class='icon-loading2 iconfont-spin'></text> 加载</button>
<button class='cu-btn block bg-black margin-tb-sm lg' loading> 微信加载</button>
<button class="cu-btn block line-orange lg">
<text class="icon-upload"></text> 图标</button>
<button class="cu-btn block bg-blue margin-tb-sm lg">
<text class="icon-loading2 iconfont-spin"></text> 加载</button>
<button class="cu-btn block bg-black margin-tb-sm lg" loading> 微信加载</button>
</view>

6
demo/pages/basics/button/design.js
View File

@@ -1,8 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
showModal(e) {
@@ -55,5 +53,5 @@ Page({
this.setData({
block: e.detail.value
})
},
});
}
})

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

@@ -1,80 +1,67 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 按钮 / 设计
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">按钮 / 设计</view></cu-custom>
<view class="padding-xl">
<view class="box bg-white text-center radius {{block?'flex-direction':''}}">
<button class='cu-btn {{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}'>我是一个按钮</button>
<button class="cu-btn {{border?'line':'bg'}}{{bordersize?bordersize:''}}-{{color}} {{round?'round':''}} {{size}} {{shadow?'shadow':''}} {{block?'block':''}}">我是一个按钮</button>
</view>
<view class='padding text-center'> class="cu-btn<text wx:if="{{color}}"> {{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}</text>" </view>
<view class="padding text-center"> class="cu-btn<text wx:if="{{color}}"> {{border?'line':'bg'}}{{bordersize?bordersize:''}}-{{color}} {{round?'round':''}} {{size}} {{shadow?'shadow':''}} {{block?'block':''}}</text>" </view>
</view>
<view class="cu-form-group margin-top" bindtap="showModal" data-target="ColorModal">
<view class='title'>选择颜色</view>
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
<view class="title">选择颜色</view>
<view class="padding-sm bg-{{color}} solid radius shadow-blur"></view>
</view>
<view class="cu-form-group">
<view class='title'>是否圆角</view>
<switch class='sm' bindchange='SetRound'></switch>
<view class="title">是否圆角</view>
<switch class="sm" bindchange="SetRound"></switch>
</view>
<view class="cu-form-group">
<view class='title'>选择尺寸</view>
<radio-group bindchange='SetSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='sm'></radio>
<view class="title">选择尺寸</view>
<radio-group bindchange="SetSize">
<label class="margin-left-sm">
<radio class="blue sm radio" value="sm"></radio>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked></radio>
<label class="margin-left-sm">
<radio class="blue sm radio" value="" checked></radio>
<text> 中</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='lg'></radio>
<label class="margin-left-sm">
<radio class="blue sm radio" value="lg"></radio>
<text> 大</text>
</label>
</radio-group>
</view>
<view class="cu-form-group">
<view class='title'>是否添加阴影</view>
<switch class='sm' bindchange='SetShadow'></switch>
<view class="title">是否添加阴影</view>
<switch class="sm" bindchange="SetShadow"></switch>
</view>
<view class="cu-form-group">
<view class='title'>是否镂空</view>
<switch class='sm' bindchange='SetBorder'></switch>
<view class="title">是否镂空</view>
<switch class="sm" bindchange="SetBorder"></switch>
</view>
<view class="cu-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></radio>
<view class="title">边框大小</view>
<radio-group bindchange="SetBorderSize">
<label class="margin-left-sm">
<radio class="blue sm radio" value="" checked></radio>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='s'></radio>
<label class="margin-left-sm">
<radio class="blue sm radio" value="s"></radio>
<text> 大</text>
</label>
</radio-group>
</view>
<!-- <view class="cu-form-group">
<view class='title'>定义为块元素</view>
<switch class='sm' bindchange='SetBlock'></switch>
</view> -->
<view class="cu-modal {{modalName=='ColorModal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar justify-end">
<view class='content'>选择颜色</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
<view class="cu-bar justify-end solid-bottom">
<view class="content">选择颜色</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<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 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>
</view>

2
demo/pages/basics/button/design.wxss
View File

@@ -2,5 +2,5 @@
display: flex;
align-items: center;
justify-content: center;
height: 100px;
height: 200rpx;
}

9
demo/pages/basics/form/form.wxml
View File

@@ -1,11 +1,4 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text>
表单控件
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">表单控件</view></cu-custom>
<view class='text-center'>
<view class="padding-xl ">
<checkbox class=''></checkbox>

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

@@ -1,4 +1,7 @@
Component({
options: {
addGlobalClass: true,
},
data: {
elements: [{
title: '布局',
@@ -94,13 +97,4 @@ Component({
}
},
},
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
}
})

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

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

20
demo/pages/basics/home/home.wxml
View File

@@ -1,9 +1,11 @@
<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>
<text class='icon-{{item.icon}}'></text>
</navigator>
</view>
<view class='cu-tabbar-height'></view>
<scroll-view scroll-y class="scrollPage">
<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="/pages/basics/{{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>
<text class='icon-{{item.icon}}'></text>
</navigator>
</view>
<view class='cu-tabbar-height'></view>
</scroll-view>

893
demo/pages/basics/icon/icon.js
View File

File diff suppressed because one or more lines are too long

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

@@ -1,19 +1,13 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 图标
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">图标</view></cu-custom>
<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px">
<view class='search-form round'>
<view class="search-form round">
<text class="icon-search"></text>
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'></input>
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput="searchIcon"></input>
</view>
</view>
<view class="cu-list grid col-3">
<view class="cu-item" wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
<text class='icon-{{item.name}} lg text-gray'></text>
<text class="icon-{{item.name}} lg text-gray"></text>
<text>{{item.name}}</text>
</view>
</view>

2
demo/pages/basics/icon/icon.wxss
View File

@@ -1,5 +1,5 @@
page{
padding-top: 50px;
padding-top: 100rpx;
}
item.none{
display: none;

1
demo/pages/basics/layout/layout.js
View File

@@ -1,7 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
TabCur:0,
tabNav: ['Flex布局', 'Grid布局', '辅助布局']

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

@@ -1,10 +1,4 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 布局
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">布局</view></cu-custom>
<scroll-view scroll-x class="bg-white nav text-center fixed" style="top:{{CustomBar}}px">
<view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{tabNav}}" wx:key bindtap='tabSelect' data-id="{{index}}">
{{tabNav[index]}}
@@ -12,94 +6,94 @@
</scroll-view>
<block wx:if="{{TabCur==0}}">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>固定尺寸
<view class="action">
<text class="icon-title text-blue"></text>固定尺寸
</view>
</view>
<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 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>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>比例布局
<view class="action">
<text class="icon-title text-blue"></text>比例布局
</view>
</view>
<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 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 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 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>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>水平对齐(justify)
<view class="action">
<text class="icon-title text-blue"></text>水平对齐(justify)
</view>
</view>
<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 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 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 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 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 class="bg-grey padding-sm margin-xs radius">around</view>
<view class="bg-grey padding-sm margin-xs radius">around</view>
</view>
</view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>垂直对齐(align)
<view class="action">
<text class="icon-title text-blue"></text>垂直对齐(align)
</view>
</view>
<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 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 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 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}}">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等分列
<view class="action">
<text class="icon-title text-blue"></text>等分列
</view>
<view class='action'></view>
<view class="action"></view>
</view>
<view class="bg-white padding">
<view class="grid col-{{index+1}} margin-bottom text-center" wx:for="{{5}}" wx:key>
@@ -107,75 +101,73 @@
</view>
</view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等高
<view class="action">
<text class="icon-title text-blue"></text>等高
</view>
<view class='action'></view>
<view class="action"></view>
</view>
<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 class="bg-img" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);"></view>
</view>
</view>
</block>
<block wx:if="{{TabCur==2}}">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>浮动
<view class="action">
<text class="icon-title text-blue"></text>浮动
</view>
</view>
<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 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}}">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>内外边距
<view class="action">
<text class="icon-title text-blue"></text>内外边距
</view>
</view>
<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="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="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="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="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="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="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="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>

2
demo/pages/basics/layout/layout.wxss
View File

@@ -1,3 +1,3 @@
page{
padding-top: 45px;
padding-top: 90rpx;
}

1
demo/pages/basics/loading/loading.js
View File

@@ -1,7 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
loadProgress:0
},

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

@@ -1,13 +1,10 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 加载
</navigator>
<view class='action'>
<view class="cu-load load-icon {{!isLoad?'loading':'over'}}"></view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">加载</view>
<view class="action" slot="right">
<view class="cu-load load-icon {{!isLoad?'loading':'over'}}"></view>
</view>
</view>
</cu-custom>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>背景
@@ -40,10 +37,10 @@
</button>
</view>
</view>
<view class='cu-load load-modal' wx:if="{{loadModal}}">
<!-- <view class='icon-emojifill text-orange'></view> -->
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<view class='gray-text'>加载中...</view>
<view class='cu-load load-modal' wx:if="{{loadModal}}">
<!-- <view class='icon-emojifill text-orange'></view> -->
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<view class='gray-text'>加载中...</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>

6
demo/pages/basics/progress/progress.js
View File

@@ -1,8 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
color:'red',
},
@@ -34,5 +32,5 @@ Page({
this.setData({
active: e.detail.value
})
},
});
}
})

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

@@ -1,115 +1,105 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 进度条
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">进度条</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>进度条形状
<view class="action">
<text class="icon-title text-blue"></text>进度条形状
</view>
</view>
<view class="padding bg-white">
<view class="cu-progress">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
<view class="cu-progress radius margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
<view class="cu-progress round margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条尺寸
<view class="action">
<text class="icon-title text-blue"></text>进度条尺寸
</view>
</view>
<view class="padding bg-white">
<view class="cu-progress round">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};"></view>
</view>
<view class="cu-progress round margin-top sm">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};"></view>
</view>
<view class="cu-progress round margin-top xs">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};"></view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<view class='action'>
<text class='icon-title text-blue'></text>进度条颜色
<view class="action">
<text class="icon-title text-blue"></text>进度条颜色
</view>
<view class='action'>
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
<view class="action">
<view class="padding-sm bg-{{color}} solid radius shadow-blur"></view>
</view>
</view>
<view class="padding {{color=='white'?'bg-grey':'bg-white'}}">
<view class="cu-progress round">
<view class='bg-{{color}}' style="width:{{loading?'61.8%':''}};"></view>
<view class="bg-{{color}}" style="width:{{loading?'61.8%':''}};"></view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条条纹
<view class="action">
<text class="icon-title text-blue"></text>进度条条纹
</view>
<switch class='sm margin-right-sm' bindchange='SetActive'></switch>
<switch class="sm margin-right-sm" bindchange="SetActive"></switch>
</view>
<view class="padding bg-white">
<view class="cu-progress round sm striped {{active?'active':''}}">
<view class='bg-green' style="width:{{loading?'60%':''}};"></view>
<view class="bg-green" style="width:{{loading?'60%':''}};"></view>
</view>
<view class="cu-progress round sm margin-top-sm striped {{active?'active':''}}">
<view class='bg-black' style="width:{{loading?'40%':''}};"></view>
<view class="bg-black" style="width:{{loading?'40%':''}};"></view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条比例
<view class="action">
<text class="icon-title text-blue"></text>进度条比例
</view>
</view>
<view class="padding bg-white">
<view class="cu-progress 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>
<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>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条布局
<view class="action">
<text class="icon-title text-blue"></text>进度条布局
</view>
</view>
<view class="padding bg-white ">
<view class='flex'>
<view class="flex">
<view class="cu-progress round">
<view class='bg-green' style="width:{{loading?'100%':''}};"></view>
<view class="bg-green" style="width:{{loading?'100%':''}};"></view>
</view>
<text class='icon-roundcheckfill text-green margin-left-sm'></text>
<text class="icon-roundcheckfill text-green margin-left-sm"></text>
</view>
<view class='flex margin-top'>
<view class="flex margin-top">
<view class="cu-progress round">
<view class='bg-green' style="width:{{loading?'80%':''}};"></view>
<view class="bg-green" style="width:{{loading?'80%':''}};"></view>
</view>
<text class='margin-left'>80%</text>
<text class="margin-left">80%</text>
</view>
</view>
<view class="cu-modal {{modalName=='ColorModal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar justify-end">
<view class='content'>选择颜色</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
<view class="cu-bar justify-end solid-bottom">
<view class="content">选择颜色</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<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 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>
</view>

8
demo/pages/basics/shadow/shadow.js
View File

@@ -1,12 +1,8 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
SetSize(e) {
this.setData({
size: e.detail.value
})
},
});
}
})

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

@@ -1,28 +1,22 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 边框阴影
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">边框阴影</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>边框
<view class="action">
<text class="icon-title text-blue"></text>边框
</view>
<view class='action'>
<switch class='sm' bindchange='SetSize'></switch>
<view class="action">
<switch class="sm" bindchange="SetSize"></switch>
</view>
</view>
<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 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>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>阴影
<view class="action">
<text class="icon-title text-blue"></text>阴影
</view>
</view>
<view class="padding text-center">

9
demo/pages/basics/tag/tag.js
View File

@@ -1,11 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {
ColorList: app.globalData.ColorList
}
});
})

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

@@ -1,78 +1,70 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 标签
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">标签</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>标签形状
<view class="action">
<text class="icon-title text-blue"></text>标签形状
</view>
</view>
<view class="padding bg-white solid-bottom">
<view class='cu-tag'>默认</view>
<view class='cu-tag round'>椭圆</view>
<view class='cu-tag radius'>圆角</view>
<view class="cu-tag">默认</view>
<view class="cu-tag round">椭圆</view>
<view class="cu-tag radius">圆角</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>标签尺寸
<view class="cu-bar bg-white margin-top solid-bottom">
<view class="action">
<text class="icon-title text-blue"></text>标签尺寸
</view>
</view>
<view class="padding bg-white">
<view class='cu-tag radius sm'>小尺寸</view>
<view class='cu-tag radius'>普通尺寸</view>
<view class="cu-tag radius sm">小尺寸</view>
<view class="cu-tag radius">普通尺寸</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>标签颜色
<view class="action">
<text class="icon-title text-blue"></text>标签颜色
</view>
</view>
<view class='padding-sm flex flex-wrap'>
<view class="padding-sm flex flex-wrap">
<view class="padding-xs" wx:for="{{ColorList}}" wx:key>
<view class='cu-tag bg-{{item.name}}'>{{item.title}}</view>
<view class="cu-tag bg-{{item.name}}">{{item.title}}</view>
</view>
<view class="padding-xs" wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<view class='cu-tag bg-{{item.name}} light'>{{item.title}}</view>
<view class="cu-tag bg-{{item.name}} light">{{item.title}}</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>镂空标签
<view class="action">
<text class="icon-title text-blue"></text>镂空标签
</view>
</view>
<view class='padding-sm flex flex-wrap'>
<view class="padding-sm flex flex-wrap">
<view class="padding-xs" wx:for="{{ColorList}}" wx:key>
<view class='cu-tag line-{{item.name}}'>{{item.title}}</view>
<view class="cu-tag line-{{item.name}}">{{item.title}}</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>胶囊样式
<view class="action">
<text class="icon-title text-blue"></text>胶囊样式
</view>
</view>
<view class="padding">
<view class="cu-capsule">
<view class='cu-tag bg-red'>
<text class='icon-likefill'></text>
<view class="cu-tag bg-red">
<text class="icon-likefill"></text>
</view>
<view class="cu-tag line-red">
12
</view>
</view>
<view class="cu-capsule round">
<view class='cu-tag bg-blue '>
<text class='icon-likefill'></text>
<view class="cu-tag bg-blue ">
<text class="icon-likefill"></text>
</view>
<view class="cu-tag line-blue">
23
</view>
</view>
<view class="cu-capsule round">
<view class='cu-tag bg-blue '>
<view class="cu-tag bg-blue ">
说明
</view>
<view class="cu-tag line-blue">
@@ -80,16 +72,16 @@
</view>
</view>
<view class="cu-capsule radius">
<view class='cu-tag bg-grey '>
<text class='icon-likefill'></text>
<view class="cu-tag bg-grey ">
<text class="icon-likefill"></text>
</view>
<view class="cu-tag line-grey">
23
</view>
</view>
<view class="cu-capsule radius">
<view class='cu-tag bg-brown sm'>
<text class='icon-likefill'></text>
<view class="cu-tag bg-brown sm">
<text class="icon-likefill"></text>
</view>
<view class="cu-tag line-brown sm">
23
@@ -97,23 +89,23 @@
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>数字标签
<view class="action">
<text class="icon-title text-blue"></text>数字标签
</view>
</view>
<view class="padding flex justify-between align-center">
<view class='cu-avatar xl radius'>
<view class="cu-avatar xl radius">
港
<view class="cu-tag badge">99+</view>
</view>
<view class='cu-avatar xl radius' style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);">
<view class='cu-tag badge'>9</view>
<view class="cu-avatar xl radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
<view class="cu-tag badge">9</view>
</view>
<view class='cu-avatar xl radius'>
<view class='cu-tag badge'>99</view>
<text class='icon-people'></text>
<view class="cu-avatar xl radius">
<view class="cu-tag badge"></view>
<text class="icon-people"></text>
</view>
<view class='cu-avatar xl radius'>
<view class='cu-tag badge'>99+</view>
<view class="cu-avatar xl radius">
<view class="cu-tag badge">99+</view>
</view>
</view>

6
demo/pages/basics/text/text.js
View File

@@ -1,8 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
list: [{
title: '嫣红',
name: 'red',
@@ -79,7 +77,5 @@ Page({
color: '#ffffff'
},
]
},
onLoad: function () { },
}
})

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

@@ -1,148 +1,139 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 文本
</navigator>
<view class='action'>
</view>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">文本</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>文字大小
<view class="action">
<text class="icon-title text-blue"></text>文字大小
</view>
</view>
<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'>
<text class=' icon-roundcheckfill text-green'></text>
<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">
<text class=" icon-roundcheckfill text-green"></text>
</view>
<view class='padding'>用于图标、数字等特大显示</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'>
<text class=' icon-roundcheckfill text-green'></text>
<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">
<text class=" icon-roundcheckfill text-green"></text>
</view>
<view class='padding'>用于图标、数字等较大显示</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 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 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 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 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 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 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 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 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 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 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 class="padding">说明文本，标签文字等关注度低的文字</view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字颜色
<view class="action">
<text class="icon-title text-blue"></text>文字颜色
</view>
</view>
<view class='grid col-5 padding-sm'>
<view class='padding-sm' wx:for="{{list}}" wx:key>
<view class='text-{{item.name}} text-center'>
<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>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字截断
<view class="action">
<text class="icon-title text-blue"></text>文字截断
</view>
</view>
<view class='padding bg-white'>
<view class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class="padding bg-white">
<view class="text-cut padding bg-grey radius" style="width:220px">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字对齐
<view class="action">
<text class="icon-title text-blue"></text>文字对齐
</view>
</view>
<view class='padding bg-white'>
<view class='text-left padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class='text-center padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class='text-right padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class="padding bg-white">
<view class="text-left padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class="text-center padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class="text-right padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>特殊文字
<view class="action">
<text class="icon-title text-blue"></text>特殊文字
</view>
</view>
<view class='padding text-center'>
<view class='padding-lr bg-white'>
<view class='solid-bottom padding'>
<text class='text-price'>80.00</text>
<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 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 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 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 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 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 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 class="padding">全部字母小写</view>
</view>
</view>

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

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

10
demo/pages/component/bar/bar.js
View File

@@ -1,9 +1 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
Custom: app.globalData.Custom,
},
})
Page({})

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

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

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

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

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

@@ -1,10 +1,4 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 卡片
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">卡片</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-titles text-orange '></text> 案例类卡片
@@ -14,29 +8,32 @@
</view>
</view>
<view class="cu-card case {{isCard?'no-card':''}}">
<view wx:for="{{1}}" wx:key class="cu-item shadow">
<view class='image'>
<image src="https://image.weilanwl.com/img/4x3-1.jpg" mode="widthFix"></image>
<view class="cu-tag bg-blue">福利</view>
<view class='cu-bar bg-shadeBottom'>我和制服不得不说的那些事！</view>
<view class="cu-item shadow">
<view class="image">
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="widthFix"></image>
<view class="cu-tag bg-blue">史诗</view>
<view class="cu-bar bg-shadeBottom">
<text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text>
</view>
</view>
<view class="cu-list menu menu-avatar">
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
<view class='content flex-sub'>
<view class='text-grey'>猪皮蛋</view>
<view class='text-gray text-sm flex justify-between'>
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
<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">
<text class="icon-attentionfill"></text> 10
<text class="icon-appreciatefill"></text> 20
<text class="icon-messagefill"></text> 30
<text class="icon-attentionfill margin-lr-xs"></text> 10
<text class="icon-appreciatefill margin-lr-xs"></text> 20
<text class="icon-messagefill margin-lr-xs"></text> 30
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom {{isCard?'margin-top':''}}">
<view class='action'>
@@ -47,48 +44,70 @@
</view>
</view>
<view class="cu-card dynamic {{isCard?'no-card':''}}">
<view wx:for="1" wx:key class="cu-item shadow">
<view class="cu-list menu menu-avatar">
<view class="cu-item shadow">
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content flex-sub'>
<view>晓晓萌</view>
<view class='text-gray text-sm flex justify-between'>
2018年12月3日
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
<view class="content flex-sub">
<view>凯尔</view>
<view class="text-gray text-sm flex justify-between">
2019年12月3日
</view>
</view>
</view>
</view>
<view class='text-content'>
你们的铲屎官是不是经常突然对手机傻笑？我家铲屎官常常坐沙发上笑的发抖！（暗中观察.jpg）
<view class="text-content">
折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
</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 class="grid flex-sub padding-lr {{isCard?'col-3 grid-square':'col-1'}}">
<view class="bg-img {{isCard?'':'only-img'}}" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);" wx:for="{{isCard?9:1}}" wx:key="{{index}}">
</view>
</view>
<view class='text-gray text-sm text-right padding'>
<text class="icon-attentionfill"></text> 10
<text class="icon-appreciatefill"></text> 20
<text class="icon-messagefill"></text> 30
<view class="text-gray text-sm text-right padding">
<text class="icon-attentionfill margin-lr-xs"></text> 10
<text class="icon-appreciatefill margin-lr-xs"></text> 20
<text class="icon-messagefill margin-lr-xs"></text> 30
</view>
<view class="cu-list menu menu-avatar comment solids-top">
<view class="cu-item" wx:for="{{2}}" wx:key>
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>猪皮蛋</view>
<view class='text-gray text-content text-df'>
我家铲屎官不舔毛，还抠脚！
<view class="cu-list menu-avatar comment solids-top">
<view class="cu-item">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
<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 class="bg-grey padding-sm radius margin-top-sm text-sm">
<view class="flex">
<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 class="margin-top-sm flex justify-between">
<view class="text-gray text-df">2018年12月4日</view>
<view>
<text class="icon-appreciate{{!isZan?'fill':''}} text-{{!isZan?'red':'gray'}}"></text>
<text class="icon-appreciatefill text-red"></text>
<text class="icon-messagefill text-gray margin-left-sm"></text>
</view>
</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
<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">
<view class="flex">
<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>
<text class="icon-appreciate text-gray"></text>
<text class="icon-messagefill text-gray margin-left-sm"></text>
</view>
</view>
@@ -97,7 +116,6 @@
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 文章类卡片
@@ -107,15 +125,17 @@
</view>
</view>
<view class="cu-card article {{isCard?'no-card':''}}">
<view wx:for="1" wx:key class="cu-item shadow">
<view class="title">这里有个戏精铲屎官，主子了解一下？</view>
<view class="cu-item shadow">
<view class="title">
<view class="text-cut">无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view>
</view>
<view class="content">
<image src="https://image.weilanwl.com/img/4x3-3.jpg" mode="aspectFill"></image>
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="aspectFill"></image>
<view class="desc">
<view class='text-content'> 这是一个伪铲屎官为了给自己的程序凑字数瞎几把乱写的一堆文字，了解一下就OK！ヾ(=･ω･=)o</view>
<view class="text-content"> 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！</view>
<view>
<view class='cu-tag bg-red light sm round'>假装有猫系列</view>
<view class='cu-tag bg-green light sm round'>戏精系列</view>
<view class="cu-tag bg-red light sm round">正义天使</view>
<view class="cu-tag bg-green light sm round">史诗</view>
</view>
</view>
</view>

18
demo/pages/component/chat/chat.js
View File

@@ -1,9 +1,15 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
InputBottom: 0
},
onLoad: function () { },
});
InputFocus(e) {
this.setData({
InputBottom: e.detail.height
})
},
InputBlur(e) {
this.setData({
InputBottom: 0
})
}
})

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

@@ -1,91 +1,83 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text>
聊天
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">聊天</view></cu-custom>
<view class="cu-chat">
<view class="cu-item self">
<view class="main">
<view class='content bg-green shadow'>
<view class="content bg-green shadow">
<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
</view>
</view>
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='date'>2018年3月23日 13:23</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date">2018年3月23日 13:23</view>
</view>
<view class='cu-info round'>对方撤回一条消息!</view>
<view class="cu-info round">对方撤回一条消息!</view>
<view class="cu-item">
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
<view class="main">
<view class='content shadow'>
<view class="content shadow">
<text>喵喵喵！喵喵喵！</text>
</view>
</view>
<view class='date '> 13:23</view>
<view class="date "> 13:23</view>
</view>
<view class="cu-info">
<text class='icon-roundclosefill text-red '></text> 对方拒绝了你的消息
<text class="icon-roundclosefill text-red "></text> 对方拒绝了你的消息
</view>
<view class="cu-info">
对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
<text class='text-blue'>发送好友验证</text>
<text class="text-blue">发送好友验证</text>
</view>
<view class="cu-item self">
<view class="main">
<image src="https://image.weilanwl.com/img/3x4-1.jpg" class='radius' mode="widthFix"></image>
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix"></image>
</view>
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='date'> 13:23</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date"> 13:23</view>
</view>
<view class="cu-item self">
<view class="main">
<view class='action text-bold text-grey'>
<view class="action text-bold text-grey">
3"
</view>
<view class='content shadow'>
<text class='icon-sound text-xxl padding-right-xl'> </text>
<view class="content shadow">
<text class="icon-sound text-xxl padding-right-xl"> </text>
</view>
</view>
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='date'>13:23</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date">13:23</view>
</view>
<view class="cu-item self">
<view class="main">
<view class='action'>
<text class='icon-locationfill text-orange text-xxl'></text>
<view class="action">
<text class="icon-locationfill text-orange text-xxl"></text>
</view>
<view class='content shadow'>
<view class="content shadow">
喵星球，喵喵市
</view>
</view>
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='date'>13:23</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date">13:23</view>
</view>
<view class="cu-item">
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
<view class="main">
<view class='content shadow'>
<view class="content shadow">
@#$^&**
</view>
<view class='action text-grey'>
<text class='icon-warnfill text-red text-xxl'></text> <text class='text-sm margin-left-sm'>翻译错误</text>
<view class="action text-grey">
<text class="icon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
</view>
</view>
<view class='date'>13:23</view>
<view class="date">13:23</view>
</view>
</view>
<view class="cu-bar foot input">
<view class='action'>
<text class='icon-sound text-grey'></text>
<view class="cu-bar foot input" style="bottom:{{InputBottom}}px">
<view class="action">
<text class="icon-sound text-grey"></text>
</view>
<input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
<view class='action'>
<text class='icon-emojifill text-grey'></text>
<input class="solid-bottom" bindfocus="InputFocus" bindblur="InputBlur" adjust-position="{{false}}" focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
<view class="action">
<text class="icon-emojifill text-grey"></text>
</view>
<button class='cu-btn bg-green shadow'>发送</button>
<button class="cu-btn bg-green shadow">发送</button>
</view>

2
demo/pages/component/chat/chat.wxss
View File

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

71
demo/pages/component/form/form.js
View File

@@ -11,8 +11,7 @@ Page({
['猪肉绦虫', '吸血虫']
],
objectMultiArray: [
[
{
[{
id: 0,
name: '无脊柱动物'
},
@@ -20,8 +19,8 @@ Page({
id: 1,
name: '脊柱动物'
}
], [
{
],
[{
id: 0,
name: '扁性动物'
},
@@ -41,8 +40,8 @@ Page({
id: 3,
name: '节肢动物'
}
], [
{
],
[{
id: 0,
name: '猪肉绦虫'
},
@@ -56,6 +55,10 @@ Page({
time: '12:01',
date: '2018-12-25',
region: ['广东省', '广州市', '海珠区'],
imgList: [],
modalName: null,
textareaAValue: '',
textareaBValue: ''
},
PickerChange(e) {
console.log(e);
@@ -63,7 +66,7 @@ Page({
index: e.detail.value
})
},
MultiChange (e) {
MultiChange(e) {
this.setData({
multiIndex: e.detail.value
})
@@ -134,14 +137,64 @@ Page({
time: e.detail.value
})
},
DateChange (e) {
DateChange(e) {
this.setData({
date: e.detail.value
})
},
RegionChange: function (e) {
RegionChange: function(e) {
this.setData({
region: e.detail.value
})
},
ChooseImage() {
wx.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.data.imgList.length != 0) {
this.setData({
imgList: this.data.imgList.concat(res.tempFilePaths)
})
} else {
this.setData({
imgList: res.tempFilePaths
})
}
}
});
},
ViewImage(e) {
wx.previewImage({
urls: this.data.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
wx.showModal({
title: '召唤师',
content: '确定要删除这段回忆吗？',
cancelText: '再看看',
confirmText: '再见',
success: res => {
if (res.confirm) {
this.data.imgList.splice(e.currentTarget.dataset.index, 1);
this.setData({
imgList: this.data.imgList
})
}
}
})
},
textareaAInput(e) {
this.setData({
textareaAValue: e.detail.value
})
},
textareaBInput(e) {
this.setData({
textareaBValue: e.detail.value
})
}
})

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

@@ -1,39 +1,35 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 表单
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">表单</view>
</cu-custom>
<form>
<view class="cu-form-group margin-top">
<view class='title'>邮件</view>
<input placeholder="两字短标题" class='radius' name='input'></input>
<view class="title">邮件</view>
<input placeholder="两字短标题"></input>
</view>
<view class="cu-form-group">
<view class='title'>输入框</view>
<input placeholder="三字标题" class='radius' name='input'></input>
<view class="title">输入框</view>
<input placeholder="三字标题"></input>
</view>
<view class="cu-form-group">
<view class='title'>收货地址</view>
<input placeholder="统一标题的宽度" class='radius' name='input'></input>
<view class="title">收货地址</view>
<input placeholder="统一标题的宽度"></input>
</view>
<view class="cu-form-group">
<view class='title'>收货地址</view>
<input placeholder="输入框带个图标" class='radius' name='input'></input>
<text class='icon-locationfill text-orange'></text>
<view class="title">收货地址</view>
<input placeholder="输入框带个图标"></input>
<text class="icon-locationfill text-orange"></text>
</view>
<view class="cu-form-group">
<view class='title'>验证码</view>
<input placeholder="输入框带个按钮" class='radius' name='input'></input>
<button class='cu-btn bg-green shadow'>验证码</button>
<view class="title">验证码</view>
<input placeholder="输入框带个按钮"></input>
<button class="cu-btn bg-green shadow">验证码</button>
</view>
<view class="cu-form-group">
<view class='title'>手机号码</view>
<input placeholder="输入框带标签" class='radius' name='input'></input>
<view class="title">手机号码</view>
<input placeholder="输入框带标签"></input>
<view class="cu-capsule radius">
<view class='cu-tag bg-blue '>
<view class="cu-tag bg-blue">
+86
</view>
<view class="cu-tag line-blue">
@@ -41,10 +37,8 @@
</view>
</view>
</view>
<view class="cu-form-group margin-top">
<view class='title'>普通选择</view>
<view class="title">普通选择</view>
<picker bindchange="PickerChange" value="{{index}}" range="{{picker}}">
<view class="picker">
{{index?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
@@ -52,7 +46,7 @@
</picker>
</view>
<view class="cu-form-group">
<view class='title'>多列选择</view>
<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]]}}
@@ -60,7 +54,7 @@
</picker>
</view>
<view class="cu-form-group">
<view class='title'>时间选择</view>
<view class="title">时间选择</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="TimeChange">
<view class="picker">
{{time}}
@@ -68,7 +62,7 @@
</picker>
</view>
<view class="cu-form-group">
<view class='title'>日期选择</view>
<view class="title">日期选择</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="DateChange">
<view class="picker">
{{date}}
@@ -76,88 +70,84 @@
</picker>
</view>
<view class="cu-form-group">
<view class='title'>地址选择</view>
<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>
</view>
<view class="cu-form-group margin-top">
<view class='title'>开关选择</view>
<view class="title">开关选择</view>
<switch></switch>
</view>
<view class="cu-form-group">
<view class='title'>定义颜色</view>
<switch class='red sm' checked></switch>
<view class="title">定义颜色</view>
<switch class="red sm" checked></switch>
</view>
<view class="cu-form-group">
<switch class='switch-sex' checked></switch>
<view class='title'>定义图标</view>
<switch class="switch-sex" checked></switch>
<view class="title">定义图标</view>
</view>
<view class="cu-form-group">
<view class='title'>方形开关</view>
<switch class='orange radius sm' checked></switch>
<view class="title">方形开关</view>
<switch class="orange radius sm" checked></switch>
</view>
<radio-group class="block">
<view class="cu-form-group margin-top">
<view class='title'>单选操作(radio)</view>
<view class="title">单选操作(radio)</view>
<radio checked></radio>
</view>
<view class="cu-form-group">
<view class='title'>定义样式</view>
<radio class='radio'></radio>
<view class="title">定义样式</view>
<radio class="radio"></radio>
</view>
<view class="cu-form-group">
<view class='title'>定义颜色</view>
<view class="title">定义颜色</view>
<view>
<radio class='blue radio'></radio>
<radio class='red margin-left-sm'></radio>
<radio class="blue radio"></radio>
<radio class="red margin-left-sm"></radio>
</view>
</view>
</radio-group>
<view class="cu-form-group margin-top">
<view class='title'>复选选操作(checkbox)</view>
<view class="title">复选选操作(checkbox)</view>
<checkbox></checkbox>
</view>
<view class="cu-form-group">
<view class='title'>定义形状</view>
<checkbox class='round' checked></checkbox>
<view class="title">定义形状</view>
<checkbox class="round" checked></checkbox>
</view>
<view class="cu-form-group">
<view class='title'>定义颜色</view>
<checkbox class='round blue' checked></checkbox>
<view class="title">定义颜色</view>
<checkbox class="round blue" checked></checkbox>
</view>
<view class="cu-form-group 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);">
<view class="cu-tag bg-red">
<text class='icon-close'></text>
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="padding-xs bg-img" style="background-image:url({{imgList[index]}})" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
<text class="icon-close"></text>
</view>
</view>
<view class="padding-xs solids">
<text class='icon-cameraadd'></text>
<view class="padding-xs solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
<text class="icon-cameraadd"></text>
</view>
</view>
</view>
<view class="cu-form-group margin-top" wx:hide="{{modalName==null}}">
<textarea placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class='placeholder'></textarea>
</view>
<view class="cu-form-group top" wx:hide="{{modalName==null}}">
<view class='title'>点文本框</view>
<textarea placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class='placeholder'></textarea>
</view>
<!--
<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
<view class="cu-form-group 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>
</view> -->
<textarea data-placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class="placeholder" class="{{textareaAValue?'value':''}}" bindinput="textareaAInput"></textarea>
</view>
<view class="cu-form-group top">
<view class="title">点文本框</view>
<textarea data-placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class="placeholder" class="{{textareaBValue?'value':''}}" bindinput="textareaBInput"></textarea>
</view>
</form>

4
demo/pages/component/form/form.wxss
View File

@@ -1,3 +1,3 @@
form-group .title {
min-width: calc(4em + 15px);
.cu-form-group .title {
min-width: calc(4em + 30rpx);
}

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

@@ -1,4 +1,7 @@
Component({
options: {
addGlobalClass: true,
},
data: {
elements: [
{ title: '操作条', name: 'bar', color: 'purple', icon: 'vipcard' },
@@ -13,16 +16,4 @@ Component({
{ title: '步骤条', name: 'steps', color: 'cyan', icon: 'roundcheckfill' },
],
},
onLoad: function () {
},
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 1
})
}
}
}
})

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

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

20
demo/pages/component/home/home.wxml
View File

@@ -1,9 +1,11 @@
<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>
<text class='icon-{{item.icon}}'></text>
</navigator>
</view>
<view class='cu-tabbar-height'></view>
<scroll-view scroll-y class="scrollPage">
<image src='/images/componentBg.png' mode='widthFix' class='response'></image>
<view class='nav-list'>
<navigator hover-class='none' url="/pages/component/{{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>
<text class='icon-{{item.icon}}'></text>
</navigator>
</view>
<view class='cu-tabbar-height'></view>
</scroll-view>

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

@@ -1,273 +1,308 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 列表
</navigator>
<scroll-view scroll-y="{{modalName==null}}" class="page {{modalName!=null?'show':''}}">
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">列表</view>
</cu-custom>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 宫格列表
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="gridModal">设置</button>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 宫格列表
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="gridModal">设置</button>
</view>
</view>
<view class="cu-modal {{modalName=='gridModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<radio-group class="block" bindchange="gridchange">
<view class='cu-list menu text-left'>
<view class='cu-item' wx:for="{{3}}" wx:key>
<label class='flex justify-between align-center flex-sub'>
<view class='flex-sub'>{{index +3}} 列</view>
<radio class='round' value='{{index +3}}' checked='{{gridCol==index+3}}'></radio>
</label>
<view class="cu-modal {{modalName=='gridModal'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog" catchtap>
<radio-group class="block" bindchange="gridchange">
<view class="cu-list menu text-left">
<view class="cu-item" wx:for="{{3}}" wx:key>
<label class="flex justify-between align-center flex-sub">
<view class="flex-sub">{{index +3}} 列</view>
<radio class="round" value="{{index +3}}" checked="{{gridCol==index+3}}"></radio>
</label>
</view>
</view>
</view>
</radio-group>
<view class='cu-list menu text-left solid-top'>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>边框</text>
</view>
<view class='action'>
<switch bindchange="gridswitch"></switch>
</radio-group>
<view class="cu-list menu text-left solid-top">
<view class="cu-item">
<view class="content">
<text class="text-grey">边框</text>
</view>
<view class="action">
<switch bindchange="gridswitch"></switch>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-list grid col-{{gridCol}} {{gridBorder?'':'no-border'}}">
<view class="cu-item" wx:for="{{iconList}}" wx:key wx:if="{{index<gridCol*2}}">
<view class='icon-{{item.icon}} text-{{item.color}}'>
<view class="cu-tag badge" wx:if="{{item.badge!=0}}">
<block wx:if="{{item.badge!=1}}">{{item.badge>99?'99+':item.badge}}</block>
</view>
</view>
<text>{{item.name}}</text>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 菜单列表
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="menuModal">设置</button>
</view>
</view>
<view class="cu-modal {{modalName=='menuModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<view class='cu-list menu text-left solid-top'>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>短边框</text>
</view>
<view class='action'>
<switch bindchange="menuBorder"></switch>
<view class="cu-list grid col-{{gridCol}} {{gridBorder?'':'no-border'}}">
<view class="cu-item" wx:for="{{iconList}}" wx:key wx:if="{{index<gridCol*2}}">
<view class="icon-{{item.icon}} text-{{item.color}}">
<view class="cu-tag badge" wx:if="{{item.badge!=0}}">
<block wx:if="{{item.badge!=1}}">{{item.badge>99?"99+":item.badge}}</block>
</view>
</view>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>箭头</text>
<text>{{item.name}}</text>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 菜单列表
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="menuModal">Modal</button>
</view>
</view>
<view class="cu-modal {{modalName=='menuModal'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog" catchtap>
<scroll-view scroll-y style="height:300rpx">
<view class="cu-list menu text-left solid-top">
<view class="cu-item">
<view class="content">
<text class="text-grey">短边框</text>
</view>
<view class="action">
<switch bindchange="menuBorder"></switch>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">箭头</text>
</view>
<view class="action">
<switch bindchange="menuArrow"></switch>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">卡片</text>
</view>
<view class="action">
<switch bindchange="menuCard"></switch>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">短边框</text>
</view>
<view class="action">
<switch bindchange="menuBorder"></switch>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">箭头</text>
</view>
<view class="action">
<switch bindchange="menuArrow"></switch>
</view>
</view>
<view class="cu-item">
<view class="content">
<text class="text-grey">卡片</text>
</view>
<view class="action">
<switch bindchange="menuCard"></switch>
</view>
</view>
</view>
<view class='action'>
<switch bindchange="menuArrow"></switch>
</scroll-view>
</view>
</view>
<view class="cu-list menu {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}">
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<text class="icon-circlefill text-grey"></text>
<text class="text-grey">图标 + 标题</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<image src="/images/logo.png" class="png" mode="aspectFit"></image>
<text class="text-grey">图片 + 标题</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<button class="cu-btn content" open-type="contact">
<text class="icon-btn text-olive"></text>
<text class="text-grey">Open-type 按钮</text>
</button>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
<text class="icon-discoverfill text-orange"></text>
<text class="text-grey">Navigator 跳转</text>
</navigator>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<text class="icon-emojiflashfill text-pink"></text>
<text class="text-grey">头像组</text>
</view>
<view class="action">
<view class="cu-avatar-group">
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10004.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10003.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10002.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
</view>
<text class="text-grey text-sm">4 人</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<text class="icon-btn text-green"></text>
<text class="text-grey">按钮</text>
</view>
<view class="action">
<button class="cu-btn round bg-green shadow">
<text class="icon-upload"></text> 上传</button>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<text class="icon-tagfill text-red"></text>
<text class="text-grey">标签</text>
</view>
<view class="action">
<view class="cu-tag round bg-orange light">音乐</view>
<view class="cu-tag round bg-olive light">电影</view>
<view class="cu-tag round bg-blue light">旅行</view>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<text class="icon-warn text-green"></text>
<text class="text-grey">文本</text>
</view>
<view class="action">
<text class="text-grey text-sm">小目标还没有实现！</text>
</view>
</view>
<view class="cu-item">
<view class="content padding-tb-sm">
<view>
<text class="icon-clothesfill text-blue margin-right-xs"></text> 多行Item</view>
<view class="text-gray text-sm">
<text class="icon-infofill margin-right-xs"></text> 小目标还没有实现！</view>
</view>
<view class="action">
<switch class="switch-sex sm" bindchange="switchSex"></switch>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 消息列表
</view>
</view>
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
<text class="icon-infofill text-red margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</text>
</view>
</view>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>卡片</text>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
<view class="cu-tag badge">99+</view>
</view>
<view class="content">
<view class="text-grey">
<text class="text-cut">瓦洛兰之盾-塔里克</text>
<view class="cu-tag round bg-orange sm">战士</view>
</view>
<view class='action'>
<switch bindchange="menuCard"></switch>
<view class="text-gray text-sm flex">
<text class="text-cut">
塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
</text>
</view>
</view>
</view>
</view>
</view>
<view class="cu-list menu {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}">
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-circlefill text-grey'></text>
<text class='text-grey'>图标 + 标题</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>图片 + 标题</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<button class='cu-btn content' open-type='contact'>
<text class='icon-btn text-olive'></text>
<text class='text-grey'>Open-type 按钮</text>
</button>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<navigator class='content' hover-class='none' url='../list/list' open-type="redirect">
<text class='icon-discoverfill text-orange'></text>
<text class='text-grey'>Navigator 跳转</text>
</navigator>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-emojiflashfill text-pink'></text>
<text class='text-grey'>头像组</text>
</view>
<view class='action'>
<view class="cu-avatar-group">
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="icon-notice_forbid_fill text-gray"></view>
</view>
<text class='text-grey text-sm'>4 人</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-btn text-green'></text>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='cu-btn round bg-green shadow'>
<text class='icon-upload'></text> 上传</button>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-tagfill text-red'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<view class="cu-tag round bg-orange light">音乐</view>
<view class="cu-tag round bg-olive light">电影</view>
<view class="cu-tag round bg-blue light">旅行</view>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-warn text-green'></text>
<text class='text-grey'>文本</text>
</view>
<view class='action'>
<text class='text-grey text-sm'>小目标还没有实现！</text>
</view>
</view>
<view class="cu-item">
<view class='content padding-tb-sm'>
<view>
<text class='icon-clothesfill text-blue'></text> 多行Item</view>
<view class='text-gray text-sm'>
<text class='icon-infofill'></text> 小目标还没有实现！</view>
</view>
<view class='action'>
<switch class='switch-sex sm' bindchange="switchSex"></switch>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 消息列表
</view>
</view>
<view class="cu-list menu menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<view class="cu-tag badge">99+</view>
</view>
<view class='content'>
<view class='text-grey'>文晓港
<view class="cu-tag round bg-orange sm">SVIP</view>
<view class="cu-item ">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
<view class="content">
<view class="text-pink">
<text class="text-cut">莫甘娜</text>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut">凯尔，你被自己的光芒变的盲目！</text>
</view>
</view>
<view class='text-gray text-sm'>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class='icon-notice_forbid_fill text-gray'></view>
</view>
</view>
<view class="cu-item ">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item cur">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);">
<view class="cu-tag badge"></view>
</view>
<view class='content'>
<view>喵星人互动群
<view class="cu-tag round bg-orange sm">6人</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
<view class='text-gray text-sm'>
喵星酱：
<text class='icon-picfill text-orange'></text> 图片传输中...</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class='icon-notice_forbid_fill text-gray'></view>
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
<view class="content">
<view>
<text class="text-cut">伊泽瑞尔</text>
<view class="cu-tag round bg-orange sm">断开连接...</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 等我回来一个打十个</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item cur">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
<view class="cu-tag badge"></view>
</view>
<view class="content">
<view>
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="icon-notice_forbid_fill text-gray"></view>
</view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 列表左滑
</view>
</view>
<view class="cu-list menu menu-avatar">
<view class="cu-item {{modalName=='move-box-'+ index?'move-cur':''}}" wx:for="{{4}}" wx:key bindtouchstart='ListTouchStart' bindtouchmove='ListTouchMove' bindtouchend='ListTouchEnd' data-target="move-box-{{index}}">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
<view class='move'>
<view class='bg-grey'>置顶</view>
<view class="bg-red">删除</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 列表左滑
</view>
</view>
</view>
<view class="cu-list menu-avatar">
<view class="cu-item {{modalName=='move-box-'+ index?'move-cur':''}}" wx:for="{{4}}" wx:key bindtouchstart="ListTouchStart" bindtouchmove="ListTouchMove" bindtouchend="ListTouchEnd" data-target="move-box-{{index}}">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100{{index+1}}.jpg);"></view>
<view class="content">
<view class="text-grey">文晓港</view>
<view class="text-gray text-sm">
<text class="icon-infofill text-red"></text> 消息未送达</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
<view class="move">
<view class="bg-grey">置顶</view>
<view class="bg-red">删除</view>
</view>
</view>
</view>
</scroll-view>

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

@@ -1,5 +1,10 @@
.page {
background: #f1f1f1;
height: 100Vh;
width: 100vw;
}
.page.show {
overflow: hidden;
}
.switch-sex::after {
@@ -17,3 +22,4 @@
.switch-music::before {
content: "\e6db";
}

52
demo/pages/component/modal/modal.js
View File

@@ -1,13 +1,42 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
CustomBar: app.globalData.CustomBar,
checkbox: [{
value: 0,
name: '10元',
checked: false,
hot: false,
}, {
value: 1,
name: '20元',
checked: true,
hot: false,
}, {
value: 2,
name: '30元',
checked: true,
hot: true,
}, {
value: 3,
name: '60元',
checked: false,
hot: true,
}, {
value: 4,
name: '80元',
checked: false,
hot: false,
}, {
value: 5,
name: '100元',
checked: false,
hot: false,
}]
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
@@ -15,4 +44,17 @@ Page({
modalName: null
})
},
});
ChooseCheckbox(e) {
let items = this.data.checkbox;
let values = e.currentTarget.dataset.value;
for (let i = 0, lenI = items.length; i < lenI; ++i) {
if (items[i].value == values) {
items[i].checked = !items[i].checked;
break
}
}
this.setData({
checkbox: items
})
}
})

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

@@ -1,76 +1,73 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 模态窗口
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">模态窗口</view>
</cu-custom>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 普通窗口
<view class="action">
<text class="icon-title text-orange "></text> 普通窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="Modal">Modal</button>
</view>
</view>
<view class="cu-modal {{modalName=='Modal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
<view class="content">Modal标题</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class='padding-xl'>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 底部窗口
<view class="action">
<text class="icon-title text-orange "></text> 底部窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="bottomModal">Bottom</button>
</view>
</view>
<view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar bg-white">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
<view class="action text-green">确定</view>
<view class="action text-blue" bindtap="hideModal">取消</view>
</view>
<view class='padding-xl'>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 对话窗口
<view class="action">
<text class="icon-title text-orange "></text> 对话窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
<button class='cu-btn bg-blue shadow margin-left' bindtap="showModal" data-target="DialogModal2">Dialog</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DialogModal1">Dialog</button>
<button class="cu-btn bg-blue shadow margin-left" bindtap="showModal" data-target="DialogModal2">Dialog</button>
</view>
</view>
<view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
<view class="content">Modal标题</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class='padding-xl'>
<view class="padding-xl">
Modal 内容。
</view>
<view class="cu-bar bg-white justify-end">
<view class='action'>
<button class='cu-btn line-green text-green' bindtap='hideModal'>取消</button>
<button class='cu-btn bg-green margin-left' bindtap='hideModal'>确定</button>
<view class="action">
<button class="cu-btn line-green text-green" bindtap="hideModal">取消</button>
<button class="cu-btn bg-green margin-left" bindtap="hideModal">确定</button>
</view>
</view>
@@ -80,65 +77,65 @@
<view class="cu-modal {{modalName=='DialogModal2'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
<view class="content">Modal标题</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class='padding-xl'>
<view class="padding-xl">
Modal 内容。
</view>
<view class="cu-bar bg-white">
<view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
<text class='icon-moneybag'></text>微信支付</view>
<view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>确定</view>
<view class="action margin-0 flex-sub text-green " bindtap="hideModal">
<text class="icon-moneybag"></text>微信支付</view>
<view class="action margin-0 flex-sub text-green solid-left" bindtap="hideModal">取消</view>
<view class="action margin-0 flex-sub solid-left" bindtap="hideModal">确定</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 图片窗口
<view class="action">
<text class="icon-title text-orange "></text> 图片窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="Image">Image</button>
</view>
</view>
<view class="cu-modal {{modalName=='Image'?'show':''}}">
<view class="cu-dialog">
<view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
<view class="bg-img" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');height:200px;">
<view class="cu-bar justify-end text-white">
<view class='action' bindtap='hideModal'>
<text class='icon-close '></text>
<view class="action" bindtap="hideModal">
<text class="icon-close "></text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>我知道了</view>
<view class="action margin-0 flex-sub solid-left" bindtap="hideModal">我知道了</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 单选窗口
<view class="action">
<text class="icon-title text-orange "></text> 单选窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="RadioModal">Radio</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="RadioModal">Radio</button>
</view>
</view>
<view class="cu-modal {{modalName=='RadioModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-modal {{modalName=='RadioModal'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog" catchtap>
<radio-group class="block">
<view class='cu-list menu text-left'>
<view class='cu-item' wx:for="{{5}}" wx:key>
<label class='flex justify-between align-center flex-sub'>
<view class='flex-sub'>Item {{index +1}}</view>
<radio class='round'></radio>
<view class="cu-list menu text-left">
<view class="cu-item" wx:for="{{5}}" wx:key>
<label class="flex justify-between align-center flex-sub">
<view class="flex-sub">Item {{index +1}}</view>
<radio class="round"></radio>
</label>
</view>
</view>
@@ -147,41 +144,43 @@
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 多选窗口
<view class="action">
<text class="icon-title text-orange "></text> 多选窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="ChooseModal">Choose</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="ChooseModal">Choose</button>
</view>
</view>
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog" catchtap>
<view class="cu-bar bg-white">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
<view class="action text-blue" bindtap="hideModal">取消</view>
<view class="action text-green" bindtap="hideModal">确定</view>
</view>
<view class='grid col-3 padding-sm'>
<view wx:for="{{9}}" class='padding-xs' wx:key>
<button class='cu-btn orange lg block {{index == 2?"bg":"line"}}-orange'>Item {{index + 1}}</button>
<view class="grid col-3 padding-sm">
<view wx:for="{{checkbox}}" class="padding-xs" wx:key="{{index}}">
<button class="cu-btn orange lg block {{item.checked?'bg-orange':'line-orange'}}" bindtap="ChooseCheckbox" data-value="{{item.value}}"> {{item.name}}
<view class="cu-tag sm round {{item.checked?'bg-white text-orange':'bg-orange'}}" wx:if="{{item.hot}}">HOT</view>
</button>
</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 侧边抽屉
<view class="action">
<text class="icon-title text-orange "></text> 侧边抽屉
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DrawerModalL">Left</button>
<button class='cu-btn bg-blue shadow margin-left' bindtap="showModal" data-target="DrawerModalR">Right</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DrawerModalL">Left</button>
<button class="cu-btn bg-blue shadow margin-left" bindtap="showModal" data-target="DrawerModalR">Right</button>
</view>
</view>
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;">
<view class='cu-list menu text-left'>
<view class='cu-item arrow' wx:for="{{5}}" wx:key>
<view class='content'>
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
<view class="cu-list menu text-left">
<view class="cu-item arrow" wx:for="{{5}}" wx:key>
<view class="content">
<view>Item {{index +1}}</view>
</view>
</view>
@@ -189,35 +188,12 @@
</view>
</view>
<view class="cu-modal drawer-modal justify-end {{modalName=='DrawerModalR'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;">
<view class="cu-list menu menu-avatar text-left">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<view class="cu-tag badge">99+</view>
</view>
<view class='content'>
<view class='text-grey'>文晓港
<view class="cu-tag round bg-orange sm">SVIP</view>
</view>
<view class='text-gray text-sm'>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
<view class="cu-modal drawer-modal justify-end {{modalName=='DrawerModalR'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
<view class="cu-list menu text-left">
<view class="cu-item arrow" wx:for="{{5}}" wx:key>
<view class="content">
<view>Item {{index +1}}</view>
</view>
</view>
</view>

4
demo/pages/component/nav/nav.js
View File

@@ -1,13 +1,9 @@
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

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

@@ -1,70 +1,62 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 导航栏
</navigator>
</view>
</view>
<view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='bg-grey padding margin text-center'>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">导航栏</view></cu-custom>
<view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class="bg-grey padding margin text-center">
Tab{{index}}
</view>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-titles text-orange '></text> 默认
<view class="action">
<text class="icon-titles text-orange"></text> 默认
</view>
</view>
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap="tabSelect" data-id="{{index}}">
Tab{{index}}
</view>
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 居中
<view class="action">
<text class="icon-title text-orange"></text> 居中
</view>
</view>
<scroll-view scroll-x class="bg-white nav text-center">
<view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
<view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{3}}" wx:key bindtap="tabSelect" data-id="{{index}}">
Tab{{index}}
</view>
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 平分
<view class="action">
<text class="icon-title text-orange"></text> 平分
</view>
</view>
<scroll-view scroll-x class="bg-white nav">
<view class='flex text-center'>
<view class="cu-item flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap='tabSelect' data-id="{{index}}">
<view class="flex text-center">
<view class="cu-item flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap="tabSelect" data-id="{{index}}">
Tab{{index}}
</view>
</view>
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 背景
<view class="action">
<text class="icon-title text-orange"></text> 背景
</view>
</view>
<scroll-view scroll-x class="bg-red nav text-center">
<view class="cu-item {{index==TabCur?'text-white cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
<view class="cu-item {{index==TabCur?'text-white cur':''}}" wx:for="{{3}}" wx:key bindtap="tabSelect" data-id="{{index}}">
Tab{{index}}
</view>
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 图标
<view class="action">
<text class="icon-title text-orange"></text> 图标
</view>
</view>
<scroll-view scroll-x class="bg-green nav text-center">
<view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
<text class='icon-camerafill'></text> 数码
<view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="0">
<text class="icon-camerafill"></text> 数码
</view>
<view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
<text class='icon-upstagefill'></text> 排行榜
<view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="1">
<text class="icon-upstagefill"></text> 排行榜
</view>
<view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
<text class='icon-clothesfill'></text> 皮肤
<view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="2">
<text class="icon-clothesfill"></text> 皮肤
</view>
</scroll-view>

10
demo/pages/component/steps/steps.js
View File

@@ -1,8 +1,5 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
basicsList: [{
icon: 'usefullfill',
name: '开始'
@@ -15,7 +12,7 @@ Page({
}, {
icon: 'roundcheckfill',
name: '完成'
},],
}, ],
basics: 0,
numList: [{
name: '开始'
@@ -25,7 +22,7 @@ Page({
name: '错误'
}, {
name: '完成'
},],
}, ],
num: 0,
scroll: 0
},
@@ -44,5 +41,4 @@ Page({
scroll: this.data.scroll == 9 ? 0 : this.data.scroll + 1
})
}
});
})

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

@@ -1,66 +1,58 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 步骤条
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">步骤条</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 基本用法
<view class="action">
<text class="icon-title text-orange"></text> 基本用法
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap='basicsSteps'>下一步</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="basicsSteps">下一步</button>
</view>
</view>
<view class='bg-white padding'>
<view class='cu-steps'>
<view class='cu-item {{index>basics?"":"text-red"}}' wx:for="{{basicsList}}" wx:key>
<text class='icon-{{item.icon}}'></text> {{item.name}}
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item {{index>basics?'':'text-red'}}" wx:for="{{basicsList}}" wx:key>
<text class="icon-{{item.icon}}"></text> {{item.name}}
</view>
</view>
</view>
<view class='bg-white padding margin-top-xs'>
<view class='cu-steps'>
<view class='cu-item {{index>basics?"":"text-orange"}}' wx:for="{{basicsList}}" wx:key>
<text class='icon-{{index>basics?"title":item.icon}}'></text> {{item.name}}
<view class="bg-white padding margin-top-xs">
<view class="cu-steps">
<view class="cu-item {{index>basics?'':'text-orange'}}" wx:for="{{basicsList}}" wx:key>
<text class="icon-{{index>basics?'title':item.icon}}"></text> {{item.name}}
</view>
</view>
</view>
<view class='bg-white padding margin-top-xs'>
<view class='cu-steps steps-arrow'>
<view class='cu-item {{index>basics?"":"text-blue"}}' wx:for="{{basicsList}}" wx:key>
<text class='icon-{{item.icon}}'></text> {{item.name}}
<view class="bg-white padding margin-top-xs">
<view class="cu-steps steps-arrow">
<view class="cu-item {{index>basics?'':'text-blue'}}" wx:for="{{basicsList}}" wx:key>
<text class="icon-{{item.icon}}"></text> {{item.name}}
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange'></text> 数字完成
<view class="action">
<text class="icon-title text-orange"></text> 数字完成
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap='numSteps'>下一步</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="numSteps">下一步</button>
</view>
</view>
<view class='bg-white padding'>
<view class='cu-steps'>
<view class='cu-item {{index>num?"":"text-blue"}}' wx:for="{{numList}}" wx:key>
<text class='num {{index==2?"err":""}}' data-index='{{index + 1}}'></text> {{item.name}}
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item {{index>num?'':'text-blue'}}" wx:for="{{numList}}" wx:key>
<text class="num {{index==2?'err':''}}" data-index="{{index + 1}}"></text> {{item.name}}
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange'></text> 多级显示
<view class="action">
<text class="icon-title text-orange"></text> 多级显示
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap='scrollSteps'>下一步</button>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="scrollSteps">下一步</button>
</view>
</view>
<scroll-view scroll-x class='bg-white padding response cu-steps steps-bottom' scroll-into-view="scroll-{{scroll}}" scroll-with-animation>
<view class='cu-item {{index>scroll?"":"text-blue"}} padding-lr-xl' wx:for="{{10}}" wx:key id="scroll-{{index}}">
Level {{index + 1}} <text class='num' data-index='{{index + 1}}'></text>
<scroll-view scroll-x class="bg-white padding response cu-steps steps-bottom" scroll-into-view="scroll-{{scroll}}" scroll-with-animation>
<view class="cu-item {{index>scroll?'':'text-blue'}} padding-lr-xl" wx:for="{{10}}" wx:key id="scroll-{{index}}">
Level {{index + 1}} <text class="num" data-index="{{index + 1}}"></text>
</view>
</scroll-view>

61
demo/pages/component/swiper/swiper.js
View File

@@ -1,34 +1,38 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
cardCur: 0,
tower: [{
swiperList: [{
id: 0,
url: 'https://image.weilanwl.com/img/4x3-1.jpg'
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
url: 'https://image.weilanwl.com/img/4x3-2.jpg'
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.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'
}]
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
}, {
id: 3,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
}, {
id: 4,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
}, {
id: 5,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
}, {
id: 6,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
}],
},
onLoad() {
this.towerSwiper('tower');
this.towerSwiper('swiperList');
// 初始化towerSwiper 传已有的数组名即可
},
DotStyle(e) {
@@ -51,28 +55,25 @@ Page({
list[i].mLeft = i - parseInt(list.length / 2)
}
this.setData({
towerList: list
swiperList: 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;
let list = this.data.swiperList;
if (direction == 'right') {
let mLeft = list[0].mLeft;
let zIndex = list[0].zIndex;
@@ -83,7 +84,7 @@ Page({
list[list.length - 1].mLeft = mLeft;
list[list.length - 1].zIndex = zIndex;
this.setData({
towerList: list
swiperList: list
})
} else {
let mLeft = list[list.length - 1].mLeft;
@@ -95,8 +96,8 @@ Page({
list[0].mLeft = mLeft;
list[0].zIndex = zIndex;
this.setData({
towerList: list
swiperList: list
})
}
},
});
}
})

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

@@ -1,41 +1,45 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 轮播图
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">轮播图</view>
</cu-custom>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-pink'></text> 全屏限高轮播
<view class="action">
<text class="icon-title text-pink"></text> 全屏限高轮播
</view>
<view class='action'>
<switch class='sm' bindchange='DotStyle'></switch>
<view class="action">
<switch class="sm" bindchange="DotStyle"></switch>
</view>
</view>
<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'></image>
<swiper-item wx:for="{{swiperList}}" wx:key>
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
</swiper-item>
</swiper>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-pink'></text> 卡片式轮播
<view class="action">
<text class="icon-title text-pink"></text> 卡片式轮播
</view>
</view>
<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 wx:for="{{swiperList}}" wx:key class="{{cardCur==index?'cur':''}}">
<view class="swiper-item">
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
</view>
</swiper-item>
</swiper>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-pink'></text> 堆叠式轮播
<view class="action">
<text class="icon-title text-pink"></text> 堆叠式轮播
</view>
</view>
<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 class="tower-item {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key style="--index:{{item.zIndex}};--left:{{item.mLeft}}">
<view class="swiper-item">
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
</view>
</view>
</view>
</view>

6
demo/pages/component/swiper/swiper.wxss
View File

@@ -1 +1,5 @@
/* pages/component/swiper/swiper.wxss */
.tower-swiper .tower-item {
transform: scale(calc(0.5 + var(--index) / 10));
margin-left: calc(var(--left) * 100rpx - 150rpx);
z-index: var(--index);
}

10
demo/pages/component/timeline/timeline.js
View File

@@ -1,9 +1 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
onLoad: function () { },
});
Page({});

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

@@ -1,29 +1,25 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text>
时间轴
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">时间轴</view>
</cu-custom>
<view class="cu-timeline">
<view class="cu-time">昨天</view>
<view class='cu-item cur icon-noticefill'>
<view class="cu-item cur icon-noticefill">
<view class="content bg-green shadow-blur">
<text>22:22</text> 【广州市】快件已到达地球
</view>
</view>
<view class='cu-item text-red icon-attentionforbidfill'>
<view class="cu-item text-red icon-attentionforbidfill">
<view class="content bg-red shadow-blur">
这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
</view>
</view>
<view class='cu-item text-grey icon-evaluate_fill'>
<view class="cu-item text-grey icon-evaluate_fill">
<view class="content bg-grey shadow-blur">
这是第一次，我家的铲屎官走了这么久。
</view>
</view>
<view class='cu-item text-blue'>
<view class="cu-item text-blue">
<view class="bg-blue content">
<text>20:00</text> 【月球】快件已到达月球，准备发往地球
</view>
@@ -50,38 +46,38 @@
<view class="cu-tag bg-cyan">上午</view>
<view class="cu-tag line-cyan">10:00</view>
</view>
<view class='margin-top'>这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
<view class="margin-top">这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
</view>
</view>
<view class='cu-item text-blue'>
<view class="cu-item text-blue">
<view class="bg-blue shadow-blur content">
<view class="cu-list menu menu-avatar radius">
<view class="cu-list menu-avatar radius">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
<view class="content">
<view class="text-grey">文晓港</view>
<view class="text-gray text-sm">
<text class="icon-infofill text-red"></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
<view class="cu-tag badge">99+</view>
</view>
<view class='content'>
<view class='text-grey'>文晓港
<view class="content">
<view class="text-grey">文晓港
<view class="cu-tag round orange sm">SVIP</view>
</view>
<view class='text-gray text-sm'>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
<view class="text-gray text-sm">
<text class="icon-redpacket_fill text-red"></text> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<text class="icon-notice_forbid_fill text-gray"></text>
</view>
</view>
</view>

1
demo/pages/component/timeline/timeline.wxss
View File

@@ -1 +0,0 @@
/* pages/component/timeline/timeline.wxss */

10
demo/pages/index/index.js Normal file
View File

@@ -0,0 +1,10 @@
Page({
data: {
PageCur: 'basics'
},
NavChange(e){
this.setData({
PageCur: e.currentTarget.dataset.cur
})
}
})

8
demo/pages/index/index.json Normal file
View File

@@ -0,0 +1,8 @@
{
"usingComponents": {
"basics": "/pages/basics/home/home",
"component": "/pages/component/home/home",
"plugin": "/pages/plugin/home/home",
"about": "/pages/about/home/home"
}
}

30
demo/pages/index/index.wxml Normal file
View File

@@ -0,0 +1,30 @@
<basics wx:if="{{PageCur=='basics'}}"></basics>
<component wx:if="{{PageCur=='component'}}"></component>
<plugin wx:if="{{PageCur=='plugin'}}"></plugin>
<about wx:if="{{PageCur=='about'}}"></about>
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" bindtap="NavChange" data-cur="basics">
<view class='icon-cu-image'>
<image src="/images/tabbar/basics{{PageCur=='basics'?'_cur':''}}.png"></image>
</view>
<view class="{{PageCur=='basics'?'text-green':'text-gray'}}">元素</view>
</view>
<view class="action" bindtap="NavChange" data-cur="component">
<view class='icon-cu-image'>
<image src="/images/tabbar/component{{PageCur=='component'?'_cur':''}}.png"></image>
</view>
<view class="{{PageCur=='component'?'text-green':'text-gray'}}">组件</view>
</view>
<view class="action" bindtap="NavChange" data-cur="plugin">
<view class='icon-cu-image'>
<image src="/images/tabbar/plugin{{PageCur=='plugin'?'_cur':''}}.png"></image>
</view>
<view class="{{PageCur=='plugin'?'text-green':'text-gray'}}">扩展</view>
</view>
<view class="action" bindtap="NavChange" data-cur="about">
<view class='icon-cu-image'>
<image src="/images/tabbar/about{{PageCur=='about'?'_cur':''}}.png"></image>
</view>
<view class="{{PageCur=='about'?'text-green':'text-gray'}}">扩展</view>
</view>
</view>

1
demo/pages/index/index.wxss Normal file
View File

@@ -0,0 +1 @@
/* pages/index/index.wxss */

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

@@ -1,74 +1,70 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg);">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 微动画
</navigator>
</view>
</view>
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">微动画</view>
</cu-custom>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 默认效果
<view class="action">
<text class="icon-title text-orange"></text> 默认效果
</view>
</view>
<view class="padding-sm">
<view class='flex flex-wrap justify-around'>
<button class='cu-btn bg-{{item.color}} animation-{{animation==item.name? item.name :""}} margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name}}' wx:for="{{list}}">{{item.name}}</button>
<view class="flex flex-wrap justify-around">
<button class="cu-btn bg-{{item.color}} animation-{{animation==item.name?item.name:''}} margin-sm basis-sm shadow" bindtap="toggle" data-class="{{item.name}}" wx:for="{{list}}" wx:key="{{index}}">{{item.name}}</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 反向动画
<view class="action">
<text class="icon-title text-orange"></text> 反向动画
</view>
</view>
<view class="padding-sm">
<view class="flex flex-wrap justify-around">
<button class="cu-btn bg-{{item.color}} animation-{{animation==item.name+'s'?item.name:''}} animation-reverse margin-sm basis-sm shadow" bindtap="toggle" data-class="{{item.name+'s'}}" wx:for="{{list}}" wx:key="{{index}}">{{item.name}}</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-orange"></text> 延迟执行
</view>
<view class="action">
<button class="cu-btn bg-cyan shadow" bindtap="toggleDelay">开始执行</button>
</view>
</view>
<view class="padding-sm">
<view class='flex flex-wrap justify-around'>
<button class='cu-btn bg-{{item.color}} animation-{{animation==item.name+"s"? item.name :""}} animation-reverse margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name+"s"}}' wx:for="{{list}}">{{item.name}}</button>
<view class="flex flex-wrap justify-around">
<button class="bg-{{item.color}} cu-btn {{toggleDelay?'animation-slide-bottom':''}} margin-sm basis-sm shadow" style="animation-delay: {{(index+1)*0.1}}s;" wx:for="{{list}}" wx:key="{{index}}">0.{{index+1}}s</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 延迟执行
</view>
<view class='action'>
<button class='cu-btn bg-cyan shadow' bindtap='toggleDelay'>开始执行</button>
</view>
</view>
<view class="padding-sm">
<view class='flex flex-wrap justify-around'>
<button class=' bg-{{item.color}} cu-btn {{toggleDelay?"animation-slide-bottom":""}} margin-sm basis-sm shadow' style='animation-delay: {{(index+1)*0.1}}s;' wx:for="{{list}}">0.{{index+1}}s</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> Gif动画
<view class="action">
<text class="icon-title text-orange"></text> Gif动画
</view>
</view>
<view class="margin radius bg-gradual-green shadow-blur">
<image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-black response' style='height:100rpx'></image>
<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx"></image>
</view>
<view class="margin flex">
<view class='bg-black flex-sub margin-right radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-black.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
<view class="bg-black flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
</view>
<view class='bg-white flex-sub radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-white.gif' mode='aspectFit' class='gif-white response' style='height:240rpx'></image>
<view class="bg-white flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
</view>
</view>
<view class="margin flex">
<view class='bg-gradual-blue flex-sub margin-right radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/rhomb-black.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
<view class="bg-gradual-blue flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/rhomb-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
</view>
<view class='bg-white flex-sub radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/rhomb-white.gif' mode='aspectFit' class='gif-white response' style='height:240rpx'></image>
<view class="bg-white flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/rhomb-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
</view>
</view>
<view class="margin flex">
<view class='bg-white flex-sub margin-right radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-1.gif' mode='aspectFit' class='gif-white response' style='height:240rpx'></image>
<view class="bg-white flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-1.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
</view>
<view class='bg-black flex-sub radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-2.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
<view class="bg-black flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-2.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
</view>
</view>

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

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

136
demo/pages/plugin/drawer/drawer.wxml
View File

@@ -1,99 +1,37 @@
<view class="DrawerPage {{modalName=='viewModal'?'show':''}}">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar tabbar bg-black fixed" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="action text-center" style='width: 100rpx'>
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class='cu-btn icon-my icon bg-green shadow'> </button>
<block wx:else>
<view class="cu-avatar round" style="background-image:url({{userInfo.avatarUrl}})" bindtap="showModal" data-target="viewModal"></view>
</block>
</view>
<!-- 样式1 -->
<block wx:if="{{1==TabCur?'cur':''}}">
<view class="action {{1==TabCur?'cur':''}}" bindtap='tabSelect' data-id="1">
<view class='icon-cu-image'>
<image src='/images/tabbar/component{{1==TabCur?"_cur":""}}.png'></image>
</view>
</view>
<view class="action {{2==TabCur?'cur':''}}" bindtap='tabSelect' data-id="2">
<view class='icon-cu-image'>
<image src='/images/tabbar/plugin{{2==TabCur?"_cur":""}}.png'></image>
<view class='cu-tag badge'>99</view>
</view>
</view>
<view class="action {{3==TabCur?'cur':''}}" bindtap='tabSelect' data-id="3">
<view class='icon-cu-image'>
<image src='/images/tabbar/about{{3==TabCur?"_cur":""}}.png'></image>
<view class='cu-tag badge'></view>
</view>
</view>
</block>
<!-- 样式2 -->
<block wx:if="{{1!=TabCur?'cur':''}}">
<scroll-view scroll-x class="nav" scroll-with-animation scroll-left="{{scrollLeft}}" style='width:calc(100% - 440rpx)'>
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</view>
</scroll-view>
</block>
</view>
</view>
<view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='padding margin text-center'>
<view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
<view class='text-xl margin-xl'>点击头像打开抽屉</view>
<navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'> </text> 返回上一页
</navigator>
</view>
</view>
<view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap='hideModal'>
<text class='icon-pullright'></text>
</view>
<view class="DrawerWindow {{modalName=='viewModal'?'show':''}}">
<view class='padding-xl text-center text-white'>
<image src='/images/logo.png' class='response' mode='widthFix' style='width:200rpx;margin-top:100rpx'></image>
<view class='text-xl'>ColorUI组件库
<text class='text-df'>v2.0</text>
</view>
<view class='margin-top-sm'>
<text>By:文晓港</text>
</view>
</view>
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
<view class="cu-item arrow">
<view class='content' bindtap='CopyLink' data-link='https://github.com/weilanwl/ColorUI'>
<text class='icon-github text-grey'></text>
<text class='text-grey'>GitHub</text>
</view>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../about/about' hover-class='none'>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>关于ColorUI组件库</text>
</navigator>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../log/log' hover-class='none'>
<text class='icon-formfill text-green'></text>
<text class='text-grey'>日志</text>
</navigator>
</view>
<view class="cu-item arrow">
<view class='content' bindtap="showQrcode">
<text class='icon-appreciatefill text-red'></text>
<text class='text-grey'>赞赏支持</text>
</view>
</view>
<view class="cu-item arrow">
<button class='cu-btn content' open-type='feedback'>
<text class='icon-writefill text-cyan'></text>
<text class='text-grey'>意见反馈</text>
</button>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../test/list' hover-class='none'>
<text class='icon-creativefill text-orange'></text>
<text class='text-grey'>Bug测试</text>
</navigator>
</view>
</view>
</view>
<scroll-view scroll-y class="DrawerPage {{modalName=='viewModal'?'show':''}}">
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view>
<view slot="content">全屏抽屉</view>
</cu-custom>
<view class='padding margin text-center'>
<view class='cu-btn bg-green lg block shadow radius margin-xl' bindtap="showModal" data-target="viewModal">
打开抽屉
</view>
</view>
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
<view class="cu-item arrow" wx:for="{{20}}" wx:key="index">
<view class="content">
<text class="icon-github text-grey"></text>
<text class="text-grey">{{index +1}}</text>
</view>
</view>
</view>
<view class='padding margin text-center'>
<view class='cu-btn bg-green lg block shadow radius margin-xl' bindtap="showModal" data-target="viewModal">
打开抽屉
</view>
</view>
</scroll-view>
<view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap="hideModal">
<text class="icon-pullright"></text>
</view>
<scroll-view scroll-y class="DrawerWindow {{modalName=='viewModal'?'show':''}}">
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
<view class="cu-item arrow" wx:for="{{20}}" wx:key="index">
<view class="content">
<text class="icon-github text-grey"></text>
<text class="text-grey">{{index +1}}</text>
</view>
</view>
</view>
</scroll-view>

28
demo/pages/plugin/drawer/drawer.wxss
View File

@@ -1,15 +1,16 @@
page {
background-color: #555;
background-size: 100%;
background-image: var(--gradualBlue);
width: 100vw;
overflow: hidden;
}
.DrawerPage {
position: absolute;
position: fixed;
width: 100vw;
height: 100vh;
left: 0vw;
background-color: #f1f1f1;
transition: all 0.6s;
transition: all 0.4s;
}
.DrawerPage.show {
@@ -28,7 +29,7 @@ page {
transform: scale(0.9, 0.9) translateX(-100%);
opacity: 0;
pointer-events: none;
transition: all 0.6s;
transition: all 0.4s;
}
.DrawerWindow.show {
@@ -42,22 +43,23 @@ page {
width: 40vw;
height: 100vh;
right: 0;
top: 0;
top: 0;
color: transparent;
padding-bottom: 30rpx;
display: flex;
align-items: flex-end;
justify-content: center;
background-image: linear-gradient(90deg,rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
justify-content: center;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
letter-spacing: 5px;
font-size: 50rpx;
font-size: 50rpx;
opacity: 0;
pointer-events: none;
transition: all 0.6s;
pointer-events: none;
transition: all 0.4s;
}
.DrawerClose.show {
.DrawerClose.show {
opacity: 1;
pointer-events: all;
pointer-events: all;
width: 15vw;
color: #fff;
}

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

@@ -1,45 +1,38 @@
const app = getApp();
Component({
options: {
addGlobalClass: true,
},
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
list: [{
title: '索引列表',
img: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
url: '../indexes/indexes'
url: '/indexes/indexes'
},
{
title: '微动画',
img: 'https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg',
url: '../animation/animation'
url: '/animation/animation'
},
{
title: '全屏抽屉',
img: 'https://image.weilanwl.com/color2.0/plugin/qpct2148.jpg',
url: '../drawer/drawer'
url: '/drawer/drawer'
},
{
title: '垂直导航',
img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
url: '../verticalnav/verticalnav'
url: '/verticalnav/verticalnav'
}
]
},
methods: {
toChild(e) {
wx.navigateTo({
url: e.currentTarget.dataset.url
url: '/pages/plugin' + e.currentTarget.dataset.url
})
},
},
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 2
})
}
}
}
});

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

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

26
demo/pages/plugin/home/home.wxml
View File

@@ -1,15 +1,15 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg);">
<view class='content' style='top:{{StatusBar}}px;'>
<image src="/images/cjkz.png" mode='widthFix'></image>
<scroll-view scroll-y class="scrollPage">
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg">
<view slot="content">
<image src="/images/cjkz.png" mode="widthFix"></image>
</view>
</cu-custom>
<view class="cu-card">
<view class="cu-item bg-img shadow-blur" style="background-image:url({{item.img}})" bindtap="toChild" data-url="{{item.url}}" wx:for="{{list}}" wx:key>
<view class="cardTitle">
{{item.title}}
</view>
</view>
</view>
</view>
<view class="cu-card">
<view class="cu-item bg-img shadow-blur" style="background-image:url({{item.img}})" bindtap="toChild" data-url="{{item.url}}" wx:for="{{list}}" wx:key>
<view class="cardTitle">
{{item.title}}
</view>
</view>
</view>
<view class='cu-tabbar-height'></view>
<view class="cu-tabbar-height"></view>
</scroll-view>

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

@@ -1,28 +1,26 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg);">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 索引
</navigator>
</view>
</view>
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">索引</view>
</cu-custom>
<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px;">
<view class='search-form round'>
<view class="search-form round">
<text class="icon-search"></text>
<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
</view>
<view class='action'>
<button class='cu-btn bg-gradual-green shadow-blur round'>搜索</button>
<view class="action">
<button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
</view>
</view>
<scroll-view scroll-y class="indexes" scroll-into-view="indexes-{{listCurID}}" style='height:calc(100vh - {{CustomBar}}px - 50px)' scroll-with-animation="true" enable-back-to-top="true">
<scroll-view scroll-y class="indexes" scroll-into-view="indexes-{{listCurID}}" style="height:calc(100vh - {{CustomBar}}px - 50px)" scroll-with-animation="true" enable-back-to-top="true">
<block wx:for="{{list}}" wx:key>
<view class='padding indexItem-{{list[index]}}' id="indexes-{{list[index]}}" data-index="{{list[index]}}">{{list[index]}}</view>
<view class="cu-list menu menu-avatar no-padding">
<view class="padding indexItem-{{list[index]}}" id="indexes-{{list[index]}}" data-index="{{list[index]}}">{{list[index]}}</view>
<view class="cu-list menu-avatar no-padding">
<view class="cu-item" wx:for="{{2}}" wx:key wx:for-index="sub">
<view class="cu-avatar round lg">{{list[index]}}</view>
<view class='content'>
<view class='text-grey'>{{list[index]}}<text class='text-abc'>{{list[sub]}}</text>君</view>
<view class='text-gray text-sm'>
<view class="content">
<view class="text-grey">{{list[index]}}
<text class="text-abc">{{list[sub]}}</text>君</view>
<view class="text-gray text-sm">
有{{sub+2}}个主子需要伺候
</view>
</view>
@@ -30,9 +28,9 @@
</view>
</block>
</scroll-view>
<view class='indexBar' style='height:calc(100vh - {{CustomBar}}px - 50px)'>
<view class='indexBar-box' bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
<view class="indexBar-item " wx:for="{{list}}" wx:key id='{{index}}' bindtouchstart="getCur" bindtouchend="setCur" >{{list[index]}}</view>
<view class="indexBar" style="height:calc(100vh - {{CustomBar}}px - 50px)">
<view class="indexBar-box" bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
<view class="indexBar-item" wx:for="{{list}}" wx:key id="{{index}}" bindtouchstart="getCur" bindtouchend="setCur">{{list[index]}}</view>
</view>
</view>
<!--选择显示-->

46
demo/pages/plugin/indexes/indexes.wxss
View File

@@ -1,5 +1,5 @@
page {
padding-top: 50px;
padding-top: 100rpx;
}
.indexes {
@@ -10,36 +10,37 @@ page {
position: fixed;
right: 0px;
bottom: 0px;
padding: 10px 10px 10px 30px;
padding: 20rpx 20rpx 20rpx 60rpx;
display: flex;
align-items: center;
}
.indexBar .indexBar-box {
width: 20px;
width: 40rpx;
height: auto;
background: #fff;
display: flex;
flex-direction: column;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
border-radius: 10rpx;
}
.indexBar-item {
flex: 1;
width: 20px;
height: 20px;
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-size: 24rpx;
color: #888;
}
movable-view.indexBar-item {
width: 20px;
height: 20px;
width: 40rpx;
height: 40rpx;
z-index: 9;
position: relative;
}
movable-view.indexBar-item::before {
@@ -47,23 +48,24 @@ movable-view.indexBar-item::before {
display: block;
position: absolute;
left: 0;
top: 5px;
height: 10px;
width: 2px;
top: 10rpx;
height: 20rpx;
width: 4rpx;
background-color: #f37b1d;
}
.indexToast{
.indexToast {
position: fixed;
top: 0;
right: 40px;
right: 80rpx;
bottom: 0;
background: rgba(0,0,0,0.5);
width: 50px;
height: 50px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.5);
width: 100rpx;
height: 100rpx;
border-radius: 10rpx;
margin: auto;
color: #fff;
line-height: 50px;
line-height: 100rpx;
text-align: center;
font-size: 24px;
}
font-size: 48rpx;
}

57
demo/pages/plugin/verticalnav/verticalnav.js
View File

@@ -5,15 +5,66 @@ Page({
CustomBar: app.globalData.CustomBar,
Custom: app.globalData.Custom,
TabCur: 0,
VerticalNavTop: 0
MainCur: 0,
VerticalNavTop: 0,
list: [],
load: true
},
onLoad() {
wx.showLoading({
title: '加载中...',
mask: true
});
let list = [{}];
for (let i = 0; i < 26; i++) {
list[i] = {};
list[i].name = String.fromCharCode(65 + i);
list[i].id = i;
}
this.setData({
list: list,
listCur: list[0]
})
},
onReady() {
wx.hideLoading()
},
tabSelect(e) {
this.setData({
TabCur: e.currentTarget.dataset.id,
MainCur: e.currentTarget.dataset.id,
VerticalNavTop: (e.currentTarget.dataset.id - 1) * 50
})
},
VerticalMain(e) {
console.log(e.detail);
let that = this;
let list = this.data.list;
let tabHeight = 0;
if (this.data.load) {
for (let i = 0; i < list.length; i++) {
let view = wx.createSelectorQuery().select("#main-" + list[i].id);
view.fields({
size: true
}, data => {
list[i].top = tabHeight;
tabHeight = tabHeight + data.height;
list[i].bottom = tabHeight;
}).exec();
}
that.setData({
load: false,
list: list
})
}
let scrollTop = e.detail.scrollTop + 20;
for (let i = 0; i < list.length; i++) {
if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
that.setData({
VerticalNavTop: (list[i].id - 1) * 50,
TabCur: list[i].id
})
return false
}
}
}
})
})

107
demo/pages/plugin/verticalnav/verticalnav.wxml
View File

@@ -1,6 +1,6 @@
<view class='cu-custom'>
<view class="cu-bar fixed bg-shadeTop" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 返回
</navigator>
<view class='content' style='top:{{StatusBar}}px;'>Tab索引</view>
@@ -13,70 +13,103 @@
</swiper>
<view class="VerticalBox">
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:calc(100vh - 375rpx)">
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{20}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index +1}}
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{list}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab-{{item.name}}
</view>
</scroll-view>
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375rpx)" scroll-into-view="main-id-{{TabCur}}" bindscroll="VerticalMain">
<view class="padding-top padding-lr" wx:for="{{20}}" wx:key id="main-id-{{index}}">
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375rpx)" scroll-into-view="main-{{MainCur}}" bindscroll="VerticalMain">
<view class="padding-top padding-lr" wx:for="{{list}}" wx:key id="main-{{index}}">
<view class='cu-bar solid-bottom bg-white'>
<view class='action'>
<text class='icon-title text-green'></text> Tab{{index +1}}</view>
<text class='icon-title text-green'></text> Tab-{{item.name}} </view>
</view>
<view class="cu-list menu menu-avatar">
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
<text class="icon-infofill text-red margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</text>
</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
<view class="cu-tag badge">99+</view>
</view>
<view class='content'>
<view class='text-grey'>文晓港
<view class="cu-tag round bg-orange sm">SVIP</view>
<view class="content">
<view class="text-grey">
<text class="text-cut">瓦洛兰之盾-塔里克</text>
<view class="cu-tag round bg-orange sm">战士</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
</text>
</view>
<view class='text-gray text-sm'>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class='icon-notice_forbid_fill text-gray'></view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="icon-notice_forbid_fill text-gray"></view>
</view>
</view>
<view class="cu-item ">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
喵星酱：喵喵喵！</view>
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
<view class="content">
<view class="text-pink">
<text class="text-cut">莫甘娜</text>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut">凯尔，你被自己的光芒变的盲目！</text>
</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
喵星酱：喵喵喵！</view>
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
<view class="content">
<view>
<text class="text-cut">伊泽瑞尔</text>
<view class="cu-tag round bg-orange sm">断开连接...</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 等我回来一个打十个</text>
</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item cur">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
<view class="cu-tag badge"></view>
</view>
<view class="content">
<view>
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="icon-notice_forbid_fill text-gray"></view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>

18
demo/project.config.json
View File

@@ -11,7 +11,7 @@
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "2.5.2",
"libVersion": "2.6.4",
"appid": "wxfd5241d66a07713f",
"projectname": "ColorUI2.0-demo",
"debugOptions": {
@@ -36,7 +36,7 @@
"list": []
},
"miniprogram": {
"current": 32,
"current": 27,
"list": [
{
"id": 0,
@@ -201,13 +201,13 @@
"query": "",
"scene": null
},
{
"id": -1,
"name": "3.4 扩展-垂直导航",
"pathName": "pages/plugin/home/home",
"query": "",
"scene": null
},
{
"id": 27,
"name": "3.4 扩展-垂直导航",
"pathName": "pages/plugin/verticalnav/verticalnav",
"query": "",
"scene": null
},
{
"id": -1,
"name": "-----关于-首页-----",

3
template/app.json
View File

@@ -8,5 +8,8 @@
"navigationBarTitleText": "ColorUI",
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
},
"usingComponents": {
"cu-custom": "/colorui/components/cu-custom"
}
}

133
template/app.wxss
View File

@@ -1,131 +1,2 @@
@import "icon.wxss";
@import "colorui.wxss";
.nav-list {
display: flex;
flex-wrap: wrap;
padding: 0px 40rpx 0px;
justify-content: space-between;
}
.nav-li {
padding: 30rpx;
border-radius: 12rpx;
width: 45%;
margin: 0 2.5% 40rpx;
background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
}
.nav-li::after {
content: "";
position: absolute;
z-index: -1;
background-color: inherit;
width: 100%;
height: 100%;
left: 0;
bottom: -10%;
border-radius: 10rpx;
opacity: 0.2;
transform: scale(0.9, 0.9);
}
.nav-li.cur {
color: #fff;
background: rgb(94, 185, 94);
box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
}
.nav-title {
font-size: 32rpx;
font-weight: 300;
}
.nav-title::first-letter {
font-size: 40rpx;
margin-right: 4rpx;
}
.nav-name {
font-size: 28rpx;
text-transform: Capitalize;
margin-top: 20rpx;
position: relative;
}
.nav-name::before {
content: "";
position: absolute;
display: block;
width: 40rpx;
height: 6rpx;
background: #fff;
bottom: 0;
right: 0;
opacity: 0.5;
}
.nav-name::after {
content: "";
position: absolute;
display: block;
width: 100rpx;
height: 1px;
background: #fff;
bottom: 0;
right: 40rpx;
opacity: 0.3;
}
.nav-name::first-letter {
font-weight: bold;
font-size: 36rpx;
margin-right: 1px;
}
.nav-li text {
position: absolute;
right: 30rpx;
top: 30rpx;
font-size: 52rpx;
width: 60rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
}
.text-light {
font-weight: 300;
}
@keyframes show {
0% {
transform: translateY(-50px);
}
60% {
transform: translateY(40rpx);
}
100% {
transform: translateY(0px);
}
}
@-webkit-keyframes show {
0% {
transform: translateY(-50px);
}
60% {
transform: translateY(40rpx);
}
100% {
transform: translateY(0px);
}
}
@import "colorui/main.wxss";
@import "colorui/icon.wxss";

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