mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-07 14:34:02 +08:00
xiaogang
ColorUI 源代码
This commit is contained in:
weilanwl
51
app.js
Normal file
51
app.js
Normal file
@@ -0,0 +1,51 @@
|
||||
//app.js
|
||||
App({
|
||||
onLaunch: function () {
|
||||
// 展示本地存储能力
|
||||
var logs = wx.getStorageSync('logs') || []
|
||||
logs.unshift(Date.now())
|
||||
wx.setStorageSync('logs', logs)
|
||||
|
||||
// 登录
|
||||
wx.login({
|
||||
success: res => {
|
||||
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||
}
|
||||
})
|
||||
// 获取用户信息
|
||||
wx.getSetting({
|
||||
success: res => {
|
||||
if (res.authSetting['scope.userInfo']) {
|
||||
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
|
||||
wx.getUserInfo({
|
||||
success: res => {
|
||||
// 可以将 res 发送给后台解码出 unionId
|
||||
this.globalData.userInfo = res.userInfo
|
||||
|
||||
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
|
||||
// 所以此处加入 callback 以防止这种情况
|
||||
if (this.userInfoReadyCallback) {
|
||||
this.userInfoReadyCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
globalData: {
|
||||
userInfo: null
|
||||
},
|
||||
showModal: function (e) {
|
||||
var showName = e.currentTarget.dataset.modal;
|
||||
console.log(e)
|
||||
this.setData({
|
||||
modalName: showName
|
||||
})
|
||||
},
|
||||
closeModal: function (e) {
|
||||
this.setData({
|
||||
modalName: 0
|
||||
})
|
||||
}
|
||||
})
|
||||
34
app.json
Normal file
34
app.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/index/index",
|
||||
"pages/layout/layout",
|
||||
"pages/button/button",
|
||||
"pages/button/sub",
|
||||
"pages/border/border",
|
||||
"pages/badge/badge",
|
||||
"pages/bar/bar",
|
||||
"pages/label/label",
|
||||
"pages/text/text",
|
||||
"pages/icon/icon",
|
||||
"pages/loading/loading",
|
||||
"pages/image/image",
|
||||
"pages/form/form",
|
||||
"pages/nav/nav",
|
||||
"pages/item/item",
|
||||
"pages/list/list",
|
||||
"pages/side/side",
|
||||
"pages/comment/comment",
|
||||
"pages/timeline/timeline",
|
||||
"pages/slider/slider",
|
||||
"pages/rating/rating",
|
||||
"pages/modal/modal",
|
||||
"pages/progress/progress",
|
||||
"pages/chat/chat"
|
||||
],
|
||||
"window": {
|
||||
"backgroundTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#39b54a",
|
||||
"navigationBarTitleText": "Color UI",
|
||||
"navigationBarTextStyle": "light"
|
||||
}
|
||||
}
|
||||
170
app.wxss
Normal file
170
app.wxss
Normal file
@@ -0,0 +1,170 @@
|
||||
@import "icon.wxss";
|
||||
@import "colorui.wxss";
|
||||
|
||||
page {
|
||||
counter-reset: header;
|
||||
}
|
||||
|
||||
.indexImage {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.screen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
.desc text {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
color: #666;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
margin: 30rpx 30rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 6rpx;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-list.cur {
|
||||
color: #fff;
|
||||
background: rgb(94, 185, 94);
|
||||
box-shadow: 2px 2px 3px rgba(94, 185, 94, 0.4);
|
||||
}
|
||||
|
||||
.nav-list .iconfont {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.nav-name {
|
||||
color: #aaa;
|
||||
font-size: 24rpx;
|
||||
text-transform: Capitalize;
|
||||
}
|
||||
|
||||
.doc-top {
|
||||
padding: 30rpx;
|
||||
background: #39b54a;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.doc-top::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
display: block;
|
||||
width: 50rpx;
|
||||
height: 5rpx;
|
||||
background: #fff;
|
||||
box-shadow: 5rpx 7rpx 7rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.doc-top-title {
|
||||
margin-top: 30rpx;
|
||||
font-size: 48rpx;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
text-shadow: 10rpx 15rpx 15rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.doc-top-name {
|
||||
margin-top: 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-transform: Capitalize;
|
||||
text-shadow: 5rpx 7rpx 7rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.doc-main {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
line-height: 52rpx;
|
||||
}
|
||||
|
||||
.doc-main-title {
|
||||
counter-increment: header;
|
||||
line-height: 80rpx;
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.doc-main-title::before {
|
||||
content: counter(header) ". ";
|
||||
color: #888;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.doc-main-content {
|
||||
margin-bottom: 20rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.doc-example {
|
||||
padding: 0 30rpx 30rpx;
|
||||
position: relative;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.doc-example + .doc-example, .doc-example + .doc-main-content {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.doc-example::before {
|
||||
content: 'Demo';
|
||||
display: block;
|
||||
color: #bbb;
|
||||
text-transform: uppercase;
|
||||
margin: 0 -30rpx 30rpx;
|
||||
padding: 4px 10px;
|
||||
font-size: 24rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.doc-example::after {
|
||||
content: " ";
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.doc-box {
|
||||
background: #f5f5f5;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.doc-box-sub {
|
||||
background: #ddd;
|
||||
line-height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.big-sub {
|
||||
line-height: 160rpx;
|
||||
padding: 50rpx;
|
||||
}
|
||||
5
colorui.wxss
Normal file
5
colorui.wxss
Normal file
File diff suppressed because one or more lines are too long
BIN
images/icon.jpg
Normal file
BIN
images/icon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
images/index.png
Normal file
BIN
images/index.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
images/skin.jpg
Normal file
BIN
images/skin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
5
pages/badge/badge.js
Normal file
5
pages/badge/badge.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/element/badge/badge.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
3
pages/badge/badge.json
Normal file
3
pages/badge/badge.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "徽章/Badge"
|
||||
}
|
||||
89
pages/badge/badge.wxml
Normal file
89
pages/badge/badge.wxml
Normal file
@@ -0,0 +1,89 @@
|
||||
<view class="bar solid-bottom">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>形状</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="flex align-center">
|
||||
<view class='badge gray'>默认</view>
|
||||
<view class='badge gray round ml-sm'>椭圆</view>
|
||||
<view class='badge gray radius ml-sm'>圆角</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>尺寸</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="flex align-center">
|
||||
<view class='badge gray sm mr-sm'>小尺寸</view>
|
||||
<view class='badge gray'>默认</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>颜色</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="flex justify-between align-center">
|
||||
<view class='badge gray'>暗灰</view>
|
||||
<text class='badge primary round'>蔚蓝</text>
|
||||
<text class='badge secondary radius'>天青</text>
|
||||
<view class='badge success '>森绿</view>
|
||||
<text class='badge warning round'>鲜橙</text>
|
||||
<text class='badge danger radius'>嫣红</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>胶囊徽章</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="doc-main">
|
||||
<view class="flex justify-between align-center">
|
||||
<view class='badge danger capsule-badge'>
|
||||
<text class='iconfont icon-likefill'></text>
|
||||
<text>1213</text>
|
||||
</view>
|
||||
<view class='badge primary round capsule-badge'>
|
||||
<text>说明</text>
|
||||
</view>
|
||||
<view class='badge secondary round capsule-badge'>
|
||||
<text>说明</text>
|
||||
<text>说明</text>
|
||||
</view>
|
||||
<view class='badge warning radius capsule-badge'>
|
||||
<text>说明</text>
|
||||
<text>10:00</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>标记徽章</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="flex justify-between align-center">
|
||||
<view class='mark-list-item'>
|
||||
<text class='badge mark-badge cur'></text>
|
||||
</view>
|
||||
<view class='mark-list-item'>
|
||||
<text class='badge mark-badge'>9</text>
|
||||
</view>
|
||||
<view class='mark-list-item'>
|
||||
<text class='badge mark-badge'>99</text>
|
||||
</view>
|
||||
<view class='mark-list-item'>
|
||||
<text class='badge mark-badge'>99+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
11
pages/badge/badge.wxss
Normal file
11
pages/badge/badge.wxss
Normal file
@@ -0,0 +1,11 @@
|
||||
page{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.mark-list-item {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #f5f5f5;
|
||||
margin: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
22
pages/bar/bar.js
Normal file
22
pages/bar/bar.js
Normal file
@@ -0,0 +1,22 @@
|
||||
// pages/element/bar/bar.js
|
||||
Page({
|
||||
data: {
|
||||
nav: [
|
||||
{ title: '标题 + 图标', name: 'normIcon' },
|
||||
{ title: '浮动在顶部', name: 'topfix' },
|
||||
{ title: '颜色', name: 'background' },
|
||||
{ title: '居中的标题', name: 'center' },
|
||||
{ title: '搜索 + 按钮', name: 'serach' },
|
||||
{ title: '头像 + 搜索（跳转）+ 城市', name: 'serachRound' },
|
||||
{ title: '浮动在底部', name: 'bottomfix' },
|
||||
{ title: '浮动在底部的方形按钮组', name: 'bottomfixBtns' },
|
||||
{ title: '浮动在底部的输入框', name: 'bottomfixInput' }
|
||||
],
|
||||
barName: 'normIcon'
|
||||
},
|
||||
setName: function (e) {
|
||||
this.setData({
|
||||
barName: e.currentTarget.dataset.name
|
||||
})
|
||||
}
|
||||
})
|
||||
3
pages/bar/bar.json
Normal file
3
pages/bar/bar.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "操作条/Bar"
|
||||
}
|
||||
124
pages/bar/bar.wxml
Normal file
124
pages/bar/bar.wxml
Normal file
@@ -0,0 +1,124 @@
|
||||
<view class="bar" wx:if="{{barName=='normIcon'}}">
|
||||
<view class='text-lg'>
|
||||
<text class=' iconfont icon-titles warning-text ml-sm'></text> 猜你喜欢
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar mt-sm" wx:if="{{barName=='normIcon'}}">
|
||||
<view class='text-lg'>
|
||||
<text class=' iconfont icon-title success-text ml-sm'></text> 备注说明
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar mt-sm" wx:if="{{barName=='normIcon'}}">
|
||||
<view class='text-lg'>
|
||||
<text class='iconfont icon-back gray-text ml-sm'></text> 返回
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar gray" wx:if="{{barName=='background'}}">
|
||||
<view class='text-lg'>
|
||||
<text class='iconfont icon-back ml-sm'></text> 返回
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar primary mt-sm" wx:if="{{barName=='background'}}">
|
||||
<view class='text-lg'>
|
||||
<text class='iconfont icon-back ml-sm'></text> 返回
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar secondary mt-sm" wx:if="{{barName=='background'}}">
|
||||
<view class='text-lg'>
|
||||
<text class='iconfont icon-back ml-sm'></text> 返回
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar success mt-sm" wx:if="{{barName=='background'}}">
|
||||
<view class='text-lg'>
|
||||
<text class='iconfont icon-back ml-sm'></text> 返回
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar warning mt-sm" wx:if="{{barName=='background'}}">
|
||||
<view class='text-lg'>
|
||||
<text class='iconfont icon-back ml-sm'></text> 返回
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar danger mt-sm" wx:if="{{barName=='background'}}">
|
||||
<view class='text-lg'>
|
||||
<text class='iconfont icon-back ml-sm'></text> 返回
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar justify-between" wx:if="{{barName=='center'}}">
|
||||
<view class='text-df'>
|
||||
<text class='iconfont icon-back ml-sm text-lg'></text> 返回
|
||||
</view>
|
||||
<view class='bar-text'>操作条/Bar </view>
|
||||
<view class='text-df'>
|
||||
<text class='iconfont icon-share mr-sm text-lg'></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar" wx:if="{{barName=='serach'}}">
|
||||
<view class='serach-form'>
|
||||
<text class="iconfont icon-search"></text>
|
||||
<input type="text" class="search-input sub" placeholder="搜索图片、文章、视频" confirm-type="search" />
|
||||
</view>
|
||||
<button class='success btn sm mr-sm'>分类
|
||||
<text class='iconfont icon-similar'></text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="bar success" wx:if="{{barName=='serachRound'}}">
|
||||
<image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" class='round mh-sm'></image>
|
||||
<view class='serach-round'>
|
||||
<text class="iconfont icon-search"></text>
|
||||
<text>搜索图片、文章、视频</text>
|
||||
</view>
|
||||
<view class='mh-sm text-sm'>广州
|
||||
<text class="iconfont icon-triangledownfill"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar topfix shadow" wx:if="{{barName=='topfix'}}">
|
||||
<view class='text-lg'>
|
||||
<text class='iconfont icon-back ml-sm'></text> 返回
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar bottomfix shadow justify-center" wx:if="{{barName=='bottomfix'}}">
|
||||
<button class='btn success round basis-sm'>提交保存</button>
|
||||
</view>
|
||||
<view class="bar bottomfix shadow btns" wx:if="{{barName=='bottomfixBtns'}}">
|
||||
<view class='flex-sub solid-right'>
|
||||
<view class="text-xs gray-text">
|
||||
<view class='iconfont icon-service success-text text-lg'></view>
|
||||
<text class='badge mark-badge cur'></text> 客服
|
||||
</view>
|
||||
</view>
|
||||
<view class='flex-sub solid-right text-sm'>
|
||||
<view class="text-xs gray-text">
|
||||
<view class='iconfont icon-shop warning-text text-lg'></view>
|
||||
店铺
|
||||
</view>
|
||||
</view>
|
||||
<view class='flex-sub text-sm'>
|
||||
<view class="text-xs gray-text">
|
||||
<view class='iconfont icon-cart warning-text text-lg'></view>
|
||||
<text class='badge mark-badge'>99</text> 购物车
|
||||
</view>
|
||||
</view>
|
||||
<view class='danger flex-twice'>立即订购</view>
|
||||
</view>
|
||||
|
||||
<view class="bar bottomfix shadow bar-textarea" wx:if="{{barName=='bottomfixInput'}}">
|
||||
<input class='flex-sub solid-bottom ml-sm' focus="true" maxlength="300" cursor-spacing="10"></input>
|
||||
<button class='success btn mh-sm'>发送</button>
|
||||
</view>
|
||||
|
||||
<view class="{{barName=='topfix'?'fixed-page':''}}">
|
||||
<view class="nav-list {{barName==item.name?'cur':''}}" wx:for="{{nav}}" wx:key="{{index}}" bindtap='setName' data-name='{{item.name}}'>
|
||||
<view class="nav-title">{{item.title}}</view>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image src='/images/skin.jpg' mode='widthFix' class="fixed-image mt-df" wx:if="{{barName=='topfix'||barName=='bottomfixBtns'||barName=='bottomfixInput'}}"></image>
|
||||
10
pages/bar/bar.wxss
Normal file
10
pages/bar/bar.wxss
Normal file
@@ -0,0 +1,10 @@
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.fixed-page{
|
||||
margin-top: 120rpx;
|
||||
}
|
||||
.fixed-image{
|
||||
width: 100%;
|
||||
display:block;
|
||||
}
|
||||
5
pages/border/border.js
Normal file
5
pages/border/border.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/document/border/border.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
3
pages/border/border.json
Normal file
3
pages/border/border.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "边框/Border"
|
||||
}
|
||||
42
pages/border/border.wxml
Normal file
42
pages/border/border.wxml
Normal file
@@ -0,0 +1,42 @@
|
||||
<view class="bar">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>实线</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex p-xs mt-xs mb-sm flex-direction text-center">
|
||||
<view class='doc-box-sub p-sm m-xs solid'>solid</view>
|
||||
<view class='doc-box-sub p-sm m-xs solid-top'>solid-top</view>
|
||||
<view class='doc-box-sub p-sm m-xs solid-right'>solid-right</view>
|
||||
<view class='doc-box-sub p-sm m-xs solid-bottom'>solid-bottom</view>
|
||||
<view class='doc-box-sub p-sm m-xs solid-left'>solid-left</view>
|
||||
|
||||
<view class='doc-box-sub p-sm m-xs solids mt-xl'>solids</view>
|
||||
<view class='doc-box-sub p-sm m-xs solids-top'>solids-top</view>
|
||||
<view class='doc-box-sub p-sm m-xs solids-right'>solids-right</view>
|
||||
<view class='doc-box-sub p-sm m-xs solids-bottom'>solids-bottom</view>
|
||||
<view class='doc-box-sub p-sm m-xs solids-left'>solids-left</view>
|
||||
</view>
|
||||
|
||||
<view class="bar mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>虚线</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex p-xs mt-xs mb-sm flex-direction text-center">
|
||||
<view class='doc-box-sub p-sm m-xs dashed'>dashed</view>
|
||||
<view class='doc-box-sub p-sm m-xs dashed-top'>dashed-top</view>
|
||||
<view class='doc-box-sub p-sm m-xs dashed-right'>dashed-right</view>
|
||||
<view class='doc-box-sub p-sm m-xs dashed-bottom'>dashed-bottom</view>
|
||||
<view class='doc-box-sub p-sm m-xs dashed-left'>dashed-left</view>
|
||||
</view>
|
||||
|
||||
<view class="bar mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>阴影</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex p-xs mt-xs pb-lg flex-direction text-center">
|
||||
<view class='doc-box-sub p-sm m-xs shadow'>shadow</view>
|
||||
<view class='doc-box-sub p-sm m-xs mt-xl shadow-lg'>shadow-lg</view>
|
||||
<view class='doc-box-sub p-sm m-xs mt-xl shadow-alice'>shadow-alice</view>
|
||||
</view>
|
||||
14
pages/border/border.wxss
Normal file
14
pages/border/border.wxss
Normal file
@@ -0,0 +1,14 @@
|
||||
.doc-main {
|
||||
background: transparent;
|
||||
}
|
||||
page{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.doc-box-sub {
|
||||
background: #fff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.doc-box-sub.shadow, .doc-box-sub.shadow-lg,.shadow-alice {
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
5
pages/button/button.js
Normal file
5
pages/button/button.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/element/button/button.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
3
pages/button/button.json
Normal file
3
pages/button/button.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "按钮/Button"
|
||||
}
|
||||
119
pages/button/button.wxml
Normal file
119
pages/button/button.wxml
Normal file
@@ -0,0 +1,119 @@
|
||||
<view class="bar solid-bottom">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>形状</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex flex-wrap '>
|
||||
<button class='gray btn'>默认</button>
|
||||
<button class='gray btn round ml-sm'>椭圆</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>尺寸</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex flex-wrap justify-between align-center'>
|
||||
<button class='gray btn xs'>最小</button>
|
||||
<button class='gray btn sm round'>小尺寸</button>
|
||||
<button class='gray btn'>默认</button>
|
||||
<button class='gray btn lg round'>大尺寸</button>
|
||||
<button class='gray btn xl'>最大</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>颜色</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex flex-wrap justify-between'>
|
||||
<button class='primary btn'>蔚蓝</button>
|
||||
<button class='secondary btn round'>天青</button>
|
||||
<navigator class='success btn'>森绿</navigator>
|
||||
<button class='warning btn round'>鲜橙</button>
|
||||
<button class='danger btn'>嫣红</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>幽灵按钮</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex flex-wrap justify-between align-center'>
|
||||
<button class='gray btn hollow xs'>默认</button>
|
||||
<button class='primary btn hollow sm'>蔚蓝</button>
|
||||
<button class='secondary btn hollow round'>天青</button>
|
||||
<navigator class='success btn hollow'>森绿</navigator>
|
||||
<button class='warning btn hollow lg round'>鲜橙</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>块状按钮</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex flex-direction'>
|
||||
<button class='gray btn block lg'>默认</button>
|
||||
<button class='primary btn mt-sm block lg'>主键</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>带图标的按钮</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex justify-center align-center'>
|
||||
<button class='secondary btn block hollow round'>
|
||||
<text class='iconfont icon-appreciate mr-xs'></text> 次级键
|
||||
</button>
|
||||
<button class='primary btn ml-sm'>
|
||||
<text class='iconfont icon-loading iconfont-spin mr-xs'></text> 主键
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>带图标的圆形按钮</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='flex justify-center align-center'>
|
||||
<button class='primary btn xs iconfont icon-appreciate'>
|
||||
</button>
|
||||
<button class='secondary btn sm ml-sm iconfont icon-discoverfill'>
|
||||
</button>
|
||||
<button class='success btn ml-sm iconfont icon-locationfill'>
|
||||
</button>
|
||||
<button class='warning btn lg ml-sm iconfont icon-weibo'>
|
||||
</button>
|
||||
<button class='danger btn xl ml-sm iconfont icon-presentfill'>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>固定在底部</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<navigator class='btn success block lg' url='sub?ctype=foot'> 预览
|
||||
<text class='iconfont icon-roundright ml-xs'></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>悬浮按钮</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<navigator class='btn warning block lg mb-sm' url='sub?ctype=fixed'> 预览
|
||||
<text class='iconfont icon-roundright ml-xs'></text>
|
||||
</navigator>
|
||||
</view>
|
||||
6
pages/button/button.wxss
Normal file
6
pages/button/button.wxss
Normal file
@@ -0,0 +1,6 @@
|
||||
page{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.doc-example > button{
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
73
pages/button/sub.js
Normal file
73
pages/button/sub.js
Normal file
@@ -0,0 +1,73 @@
|
||||
// pages/element/button/foot.js
|
||||
Page({
|
||||
data: {
|
||||
ctype: '',
|
||||
clist: [],
|
||||
glo_is_load: true
|
||||
},
|
||||
onLoad: function (options) {
|
||||
var that = this
|
||||
var ctype = options.ctype;
|
||||
that.setData({
|
||||
ctype: ctype,
|
||||
})
|
||||
var this_title = '';
|
||||
if (ctype == 'foot') {
|
||||
this_title = '固定在底部'
|
||||
} else if (ctype == 'fixed') {
|
||||
this_title = '悬浮按钮'
|
||||
}
|
||||
wx.setNavigationBarTitle({
|
||||
title: this_title
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
||||
5
pages/button/sub.json
Normal file
5
pages/button/sub.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
6
pages/button/sub.wxml
Normal file
6
pages/button/sub.wxml
Normal file
@@ -0,0 +1,6 @@
|
||||
<image src='/images/skin.jpg' mode='widthFix'></image>
|
||||
<view class='foot-btn' wx:if="{{ctype == 'foot'}}">
|
||||
<button class='danger btn hollow'><text class='iconfont icon-delete mr-xs'></text> 删除</button>
|
||||
<button class='success btn round'><text class='iconfont icon-upload mr-xs'></text> 上传</button>
|
||||
</view>
|
||||
<button class='warning btn iconfont lg fixed icon-add' style='bottom:40rpx' wx:if="{{ctype == 'fixed'}}"></button>
|
||||
4
pages/button/sub.wxss
Normal file
4
pages/button/sub.wxss
Normal file
@@ -0,0 +1,4 @@
|
||||
image{
|
||||
width: 100%;
|
||||
display:block;
|
||||
}
|
||||
5
pages/chat/chat.js
Normal file
5
pages/chat/chat.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/document/chat/chat.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
1
pages/chat/chat.json
Normal file
1
pages/chat/chat.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
71
pages/chat/chat.wxml
Normal file
71
pages/chat/chat.wxml
Normal file
@@ -0,0 +1,71 @@
|
||||
<view class="chat-item">
|
||||
<view class="chat-main justify-end flex">
|
||||
<view>
|
||||
<view class='chat-centact success'>
|
||||
喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！
|
||||
</view>
|
||||
<view class='gray-text text-sm text-right mt-sm'>2018年3月23日 13:23</view>
|
||||
</view>
|
||||
</view>
|
||||
<image src="http://image.weilanwl.com/img/square-3.jpg" class="img-df radius" mode='widthFix'></image>
|
||||
</view>
|
||||
<view class="chat-item chat-left">
|
||||
<image src="http://image.weilanwl.com/img/square-2.jpg" class="img-df round" mode='widthFix'></image>
|
||||
<view class="chat-main">
|
||||
<view>
|
||||
<view class='chat-centact'>
|
||||
喵喵喵！喵！喵！喵！喵喵喵！
|
||||
</view>
|
||||
<view class='gray-text text-sm mt-sm'>5天前 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chat-item">
|
||||
<view class="chat-main justify-end flex">
|
||||
<view>
|
||||
<view class='chat-centact'>
|
||||
<image src="http://image.weilanwl.com/img/3x4-1.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class='gray-text text-sm text-right mt-sm'>10分钟前</view>
|
||||
</view>
|
||||
</view>
|
||||
<image src="http://image.weilanwl.com/img/square-3.jpg" class="img-df radius" mode='widthFix'></image>
|
||||
</view>
|
||||
<view class="chat-item chat-left">
|
||||
<image src="http://image.weilanwl.com/img/square-2.jpg" class="img-df round" mode='widthFix'></image>
|
||||
<view class="chat-main">
|
||||
<view>
|
||||
<view class='chat-centact'>
|
||||
<text class='iconfont icon-notification'></text>3"
|
||||
</view>
|
||||
<view class='gray-text text-sm mt-sm'>1分钟前 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chat-item">
|
||||
<view class="chat-main justify-end flex">
|
||||
<view>
|
||||
<view class='chat-centact'>
|
||||
<view>戏精铲屎官，主子了解一下？</view>
|
||||
<view class="flex mt-sm">
|
||||
<image src="http://image.weilanwl.com/img/4x3-3.jpg" mode="widthFix" class='basis-sm'></image>
|
||||
<view class="ml-sm text-sm">
|
||||
一个伪铲屎官瞎几把乱写的一堆文字.
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex solid-top align-center pt-sm mt-sm">
|
||||
<image src="http://image.weilanwl.com/img/4x4.jpg" class='round img-xs' mode='widthFix'></image>
|
||||
<view class="gray-text ml-sm text-sm">文晓港
|
||||
<text>/ 程序员</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='gray-text text-sm text-right mt-sm'>刚刚</view>
|
||||
</view>
|
||||
</view>
|
||||
<image src="http://image.weilanwl.com/img/square-3.jpg" class="img-df radius" mode='widthFix'></image>
|
||||
</view>
|
||||
<view class="bar bottomfix shadow bar-textarea">
|
||||
<input class='flex-sub solid-bottom ml-sm' focus="true" maxlength="300" cursor-spacing="10"></input>
|
||||
<button class='success btn mh-sm'>发送</button>
|
||||
</view>
|
||||
4
pages/chat/chat.wxss
Normal file
4
pages/chat/chat.wxss
Normal file
@@ -0,0 +1,4 @@
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
5
pages/comment/comment.js
Normal file
5
pages/comment/comment.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/document/comment/comment.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
1
pages/comment/comment.json
Normal file
1
pages/comment/comment.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
36
pages/comment/comment.wxml
Normal file
36
pages/comment/comment.wxml
Normal file
@@ -0,0 +1,36 @@
|
||||
<view class="comment">
|
||||
<view class="comment-item ph-sm">
|
||||
<view class="bar justify-between">
|
||||
<view class="bar-fr bar">
|
||||
<image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" class="round"></image>
|
||||
<text class='ml-sm'>文晓港</text>
|
||||
<text class="gray-text text-sm"> 3 小时前</text>
|
||||
</view>
|
||||
<button class="success btn sm bar-fr" bindtap="recomment" data-id="{{comments.comment_id}}">
|
||||
<text class="iconfont icon-writefill"> 回复</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="comment-mian">
|
||||
<view class="comment-content">评论回复的内容</view>
|
||||
<view class="lattice-image">
|
||||
<view style='background-image:url(http://image.weilanwl.com/img/4x3-1.jpg)'>
|
||||
</view>
|
||||
<view style='background-image:url(http://image.weilanwl.com/img/3x4-3.jpg)'>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-sub">
|
||||
<view class="comment-sub-name">
|
||||
<text class="success-text">王晓明</text>
|
||||
<text class="gray-text text-sm">2 分钟前</text>
|
||||
</view>
|
||||
<view class="comment-sub-content">说的dei dei！</view>
|
||||
<view class="comment-sub-name top-xs">
|
||||
<text class="success-text">文晓港 </text>回复
|
||||
<text class="success-text"> 王晓明</text>
|
||||
<text class="gray-text text-sm">2 分钟前</text>
|
||||
</view>
|
||||
<view class="comment-sub-content">说的dei dei！</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
1
pages/comment/comment.wxss
Normal file
1
pages/comment/comment.wxss
Normal file
@@ -0,0 +1 @@
|
||||
/* pages/document/comment/comment.wxss */
|
||||
171
pages/form/form.js
Normal file
171
pages/form/form.js
Normal file
@@ -0,0 +1,171 @@
|
||||
// pages/form/form.js
|
||||
Page({
|
||||
data: {
|
||||
array: [' 禁止换行，超出容器部分截断（以 ... 结束）', '中国', '巴西', '日本'],
|
||||
index: 0,
|
||||
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
|
||||
radio: [
|
||||
{ name: 'USA', value: '美国' },
|
||||
{ name: 'CHN', value: '中国', checked: 'true' },
|
||||
{ name: 'BRA', value: '巴西' },
|
||||
{ name: 'JPN', value: '日本' },
|
||||
{ name: 'ENG', value: '澳大利亚' },
|
||||
{ name: 'BRA', value: '巴西' },
|
||||
{ name: 'JPN', value: '日本' },
|
||||
{ name: 'BRA', value: '巴西' },
|
||||
{ name: 'JPN', value: '日本' },
|
||||
{ name: 'ENG', value: '英国' },
|
||||
{ name: 'TUR', value: '哈萨克斯坦' },
|
||||
{ name: 'TUR', value: '法国' },
|
||||
{ name: 'BRA', value: '巴西' },
|
||||
{ name: 'ENG', value: '英国' },
|
||||
{ name: 'TUR', value: '法国' }
|
||||
],
|
||||
multiIndex: [0, 0, 0],
|
||||
date: '2018-02-03',
|
||||
time: '12:01',
|
||||
region: ['广东省', '广州市', '海珠区'],
|
||||
customItem: '全部'
|
||||
},
|
||||
bindPickerChange: function (e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||||
this.setData({
|
||||
index: e.detail.value
|
||||
})
|
||||
},
|
||||
bindMultiPickerChange: function (e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||||
this.setData({
|
||||
multiIndex: e.detail.value
|
||||
})
|
||||
},
|
||||
bindMultiPickerColumnChange: function (e) {
|
||||
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
|
||||
var data = {
|
||||
multiArray: this.data.multiArray,
|
||||
multiIndex: this.data.multiIndex
|
||||
};
|
||||
data.multiIndex[e.detail.column] = e.detail.value;
|
||||
switch (e.detail.column) {
|
||||
case 0:
|
||||
switch (data.multiIndex[0]) {
|
||||
case 0:
|
||||
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
|
||||
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
|
||||
break;
|
||||
case 1:
|
||||
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
|
||||
data.multiArray[2] = ['鲫鱼', '带鱼'];
|
||||
break;
|
||||
}
|
||||
data.multiIndex[1] = 0;
|
||||
data.multiIndex[2] = 0;
|
||||
break;
|
||||
case 1:
|
||||
switch (data.multiIndex[0]) {
|
||||
case 0:
|
||||
switch (data.multiIndex[1]) {
|
||||
case 0:
|
||||
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
|
||||
break;
|
||||
case 1:
|
||||
data.multiArray[2] = ['蛔虫'];
|
||||
break;
|
||||
case 2:
|
||||
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
|
||||
break;
|
||||
case 3:
|
||||
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
|
||||
break;
|
||||
case 4:
|
||||
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
switch (data.multiIndex[1]) {
|
||||
case 0:
|
||||
data.multiArray[2] = ['鲫鱼', '带鱼'];
|
||||
break;
|
||||
case 1:
|
||||
data.multiArray[2] = ['青蛙', '娃娃鱼'];
|
||||
break;
|
||||
case 2:
|
||||
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
data.multiIndex[2] = 0;
|
||||
console.log(data.multiIndex);
|
||||
break;
|
||||
}
|
||||
this.setData(data);
|
||||
},
|
||||
|
||||
bindDateChange: function (e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||||
this.setData({
|
||||
date: e.detail.value
|
||||
})
|
||||
},
|
||||
bindTimeChange: function (e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||||
this.setData({
|
||||
time: e.detail.value
|
||||
})
|
||||
},
|
||||
bindRegionChange: function (e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||||
this.setData({
|
||||
region: e.detail.value
|
||||
})
|
||||
},
|
||||
showModal: function (e) {
|
||||
var showName = e.currentTarget.dataset.modal;
|
||||
this.setData({
|
||||
modalName: showName
|
||||
})
|
||||
},
|
||||
closeModal: function (e) {
|
||||
this.setData({
|
||||
modalName: null
|
||||
})
|
||||
},
|
||||
uploadimg: function () {
|
||||
var that = this;
|
||||
wx.chooseImage({
|
||||
count: 1, // 默认9
|
||||
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success: function (res) {
|
||||
var tempFilePaths = res.tempFilePaths
|
||||
that.setData({
|
||||
chooseimg: true,
|
||||
tempFilePaths: tempFilePaths
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
viewUploadimg: function (e) {
|
||||
var url = this.data.tempFilePaths;
|
||||
wx.previewImage({
|
||||
urls: url
|
||||
})
|
||||
},
|
||||
uploadImage: function (e) {
|
||||
var that = this;
|
||||
wx.chooseImage({
|
||||
count: 1, // 默认9
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success: function (res) {
|
||||
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
|
||||
var uploadImage = res.tempFilePaths;
|
||||
that.setData({
|
||||
uploadImage: uploadImage
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
3
pages/form/form.json
Normal file
3
pages/form/form.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "表单/Form"
|
||||
}
|
||||
266
pages/form/form.wxml
Normal file
266
pages/form/form.wxml
Normal file
@@ -0,0 +1,266 @@
|
||||
<form>
|
||||
<view class="form-box form-avatar-box">
|
||||
<view class="form-avatar" bindtap="uploadPhoto" style='background-image:url({{src}})'>
|
||||
<text>修改/上传</text>
|
||||
</view>
|
||||
<view class="form-avatar-item">
|
||||
<view class="form-item">
|
||||
<input type="text" class="form-input" name="title" value="" placeholder="输入框的描述" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<input type="text" class="form-input" name="title" value="" placeholder="输入框的描述" />
|
||||
<view class='form-input-btn'>
|
||||
<button class='success btn sm'>获取验证码</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='form-box'>
|
||||
<view class='form-item'>
|
||||
<view class='form-title cur form-title-sm'>
|
||||
两字
|
||||
</view>
|
||||
<input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
|
||||
</view>
|
||||
<view class='form-item'>
|
||||
<view class='form-title cur'>
|
||||
输入框
|
||||
</view>
|
||||
<input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
|
||||
</view>
|
||||
<view class='form-item'>
|
||||
<view class='form-title'>
|
||||
输入框项
|
||||
</view>
|
||||
<view class='form-input'>
|
||||
<input class='' type="text" placeholder="输入框的描述"></input>
|
||||
</view>
|
||||
<view class='form-input-btn'>
|
||||
<text class='iconfont icon-locationfill warning-text'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='form-item'>
|
||||
<view class='form-title'>
|
||||
输入框
|
||||
</view>
|
||||
<input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
|
||||
<view class='form-input-btn'>
|
||||
<button class='success btn sm'>获取验证码</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='form-box'>
|
||||
<view class='form-item'>
|
||||
<view class='form-title cur'>
|
||||
单列选择
|
||||
</view>
|
||||
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
|
||||
<view class="picker">
|
||||
{{array[index]}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class='form-item'>
|
||||
<view class='form-title'>
|
||||
多列选择
|
||||
</view>
|
||||
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
|
||||
<view class="picker">
|
||||
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class='form-item'>
|
||||
<view class='form-title'>
|
||||
时间选择
|
||||
</view>
|
||||
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
|
||||
<view class="picker">
|
||||
{{time}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class='form-item'>
|
||||
<view class='form-title'>
|
||||
日期选择
|
||||
</view>
|
||||
<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="bindDateChange">
|
||||
<view class="picker">
|
||||
{{date}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class='form-item'>
|
||||
<view class='form-title'>
|
||||
地址选择
|
||||
</view>
|
||||
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
|
||||
<view class="picker">
|
||||
{{region[0]}}，{{region[1]}}，{{region[2]}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class='form-box'>
|
||||
<view class='form-item'>
|
||||
<view class='form-title cur'>
|
||||
单选框
|
||||
</view>
|
||||
<view class='form-arrow' bindtap='showModal' data-modal="radioModal">
|
||||
单选框
|
||||
</view>
|
||||
<view class="modal-box {{modalName=='radioModal'?'cur':''}}">
|
||||
<view class='modal-dialog'>
|
||||
<view class="modal-title">
|
||||
<text>单选框</text>
|
||||
</view>
|
||||
<scroll-view class='modal-bd' scroll-y="true" style='max-height:500rpx;'>
|
||||
<radio-group class="list-double-col list-box" bindchange="radioChange">
|
||||
<label class="list-li" wx:for="{{radio}}">
|
||||
<view class='list-text'>{{item.value}}</view>
|
||||
<radio value="{{item.name}}" checked="{{item.checked}}" class='list-icon' />
|
||||
</label>
|
||||
</radio-group>
|
||||
</scroll-view>
|
||||
<view class='modal-option'>
|
||||
<view class='modal-option-btn' bindtap='closeModal'>取消</view>
|
||||
<view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class='form-item'>
|
||||
<view class='form-title cur'>
|
||||
复选框
|
||||
</view>
|
||||
<view class='form-arrow' bindtap='showModal' data-modal="checkboxModal">
|
||||
复选框
|
||||
</view>
|
||||
<view class="modal-box {{modalName=='checkboxModal'?'cur':''}}">
|
||||
<view class='modal-dialog'>
|
||||
<view class="modal-title">
|
||||
<text>复选框</text>
|
||||
<view class='bar-close badge danger round' bindtap='closeModal'>
|
||||
<text class='iconfont icon-close'></text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class='modal-bd' scroll-y="true" style='max-height:500rpx;'>
|
||||
<checkbox-group class="list-double-col list-box" bindchange="checkboxChange">
|
||||
<label class="list-li" wx:for="{{radio}}">
|
||||
<view class='list-text'>{{item.value}}</view>
|
||||
<checkbox class='list-icon' value="{{item.name}}" checked="{{item.checked}}" />
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</scroll-view>
|
||||
<view class='modal-option'>
|
||||
<view class='modal-option-btn' bindtap='closeModal'>取消</view>
|
||||
<view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='form-item'>
|
||||
<view class='form-title cur'>
|
||||
两级联动
|
||||
</view>
|
||||
<view class='form-arrow' bindtap='showModal' data-modal="doubleModal">
|
||||
两级联动
|
||||
</view>
|
||||
<view class="modal-box {{modalName=='doubleModal'?'cur':''}}">
|
||||
<view class='modal-dialog'>
|
||||
<view class="modal-title">
|
||||
<text>两级联动</text>
|
||||
</view>
|
||||
<view class='modal-bd double-chose'>
|
||||
<scroll-view scroll-y class="double-chose-first" style='height:640rpx;width: 400rpx;'>
|
||||
<view class="cur">北京</view>
|
||||
<view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-y class="double-chose-last" style='height:640rpx;'>
|
||||
<view class="cur">北京</view>
|
||||
<view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class='modal-option'>
|
||||
<view class='modal-option-btn' bindtap='closeModal'>取消</view>
|
||||
<view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='form-item'>
|
||||
<view class='form-title cur'>
|
||||
单项选择
|
||||
</view>
|
||||
<view class='form-arrow' bindtap='showModal' data-modal="singleModal">
|
||||
单项选择
|
||||
</view>
|
||||
<view class="modal-box {{modalName=='singleModal'?'cur':''}}">
|
||||
<view class='modal-dialog'>
|
||||
<view class="modal-title">
|
||||
<text>单项选择</text>
|
||||
</view>
|
||||
<scroll-view class='modal-bd' scroll-y="true" style='max-height:800rpx;'>
|
||||
<view class='single-modal'>
|
||||
<view class="single-modal-item {{item.checked?'cur':''}}" wx:for="{{radio}}" bindtap='closeModal'>{{item.value}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class='modal-option'>
|
||||
<view class='modal-option-btn' bindtap='closeModal'>取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item form-textarea {{modalName==null?'':'hide'}}">
|
||||
<view class='form-title cur'>
|
||||
文本框
|
||||
</view>
|
||||
<textarea placeholder='多行文本输入框' maxlength="-1"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class='form-box'>
|
||||
<view class='form-item'>
|
||||
<view class='form-title cur'>
|
||||
单图上传
|
||||
</view>
|
||||
<view class='form-arrow' wx:if="{{chooseimg}}" bindtap='viewUploadimg'>
|
||||
<text class='success-text iconfont icon-roundcheckfill'></text> 已上传
|
||||
<text class='gray-text fr'>预览</text>
|
||||
</view>
|
||||
<view class='form-arrow form-add' bindtap='uploadimg' wx:else>
|
||||
请选择图片
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='form-item form-upload'>
|
||||
<view class='form-title cur'>
|
||||
多图上传
|
||||
</view>
|
||||
<view class="lattice-image">
|
||||
<view>
|
||||
<image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='aspectFill'></image>
|
||||
<view class='iconfont icon-close'></view>
|
||||
</view>
|
||||
<view class='lattice-btn'>
|
||||
<text class='iconfont icon-cameraadd'></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='form-box'>
|
||||
<view class="form-item form-upload {{modalName==null?'':'hide'}}">
|
||||
<textarea placeholder='多行文本输入框' maxlength="-1"></textarea>
|
||||
<view class="lattice-image">
|
||||
<view>
|
||||
<image src='http://image.weilanwl.com/img/3x4-1.jpg' mode='aspectFill'></image>
|
||||
<view class='iconfont icon-close'></view>
|
||||
</view>
|
||||
<view class='lattice-btn'>
|
||||
<text class='iconfont icon-cameraadd'></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</form>
|
||||
3
pages/form/form.wxss
Normal file
3
pages/form/form.wxss
Normal file
@@ -0,0 +1,3 @@
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
5
pages/icon/icon.js
Normal file
5
pages/icon/icon.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/element/icon/icon.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
3
pages/icon/icon.json
Normal file
3
pages/icon/icon.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "图标/Icon"
|
||||
}
|
||||
839
pages/icon/icon.wxml
Normal file
839
pages/icon/icon.wxml
Normal file
@@ -0,0 +1,839 @@
|
||||
<view class="doc-icon-list">
|
||||
<view class="iconfont icon-activityfill">
|
||||
<text>activity_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-add">
|
||||
<text>add</text>
|
||||
</view>
|
||||
<view class="iconfont icon-addressbook">
|
||||
<text>address_book</text>
|
||||
</view>
|
||||
<view class="iconfont icon-album">
|
||||
<text>album</text>
|
||||
</view>
|
||||
<view class="iconfont icon-all">
|
||||
<text>all</text>
|
||||
</view>
|
||||
<view class="iconfont icon-appreciate">
|
||||
<text>appreciate</text>
|
||||
</view>
|
||||
<view class="iconfont icon-appreciatefill">
|
||||
<text>appreciate_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-apps">
|
||||
<text>apps</text>
|
||||
</view>
|
||||
<view class="iconfont icon-attention">
|
||||
<text>attention</text>
|
||||
</view>
|
||||
<view class="iconfont icon-attentionfavor">
|
||||
<text>attention_favor</text>
|
||||
</view>
|
||||
<view class="iconfont icon-attentionfavorfill">
|
||||
<text>attention_favor_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-attentionfill">
|
||||
<text>attention_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-attentionforbid">
|
||||
<text>attention_forbid</text>
|
||||
</view>
|
||||
<view class="iconfont icon-attentionforbidfill">
|
||||
<text>attention_forbid_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-baby">
|
||||
<text>baby</text>
|
||||
</view>
|
||||
<view class="iconfont icon-babyfill">
|
||||
<text>baby_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-back">
|
||||
<text>back</text>
|
||||
</view>
|
||||
<view class="iconfont icon-back_android">
|
||||
<text>back_android</text>
|
||||
</view>
|
||||
<view class="iconfont icon-backdelete">
|
||||
<text>back_delete</text>
|
||||
</view>
|
||||
<view class="iconfont icon-backwardfill">
|
||||
<text>backward_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-bad">
|
||||
<text>bad</text>
|
||||
</view>
|
||||
<view class="iconfont icon-barcode">
|
||||
<text>bar_code</text>
|
||||
</view>
|
||||
<view class="iconfont icon-brand">
|
||||
<text>brand</text>
|
||||
</view>
|
||||
<view class="iconfont icon-brandfill">
|
||||
<text>brand_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-calendar">
|
||||
<text>calendar</text>
|
||||
</view>
|
||||
<view class="iconfont icon-camera">
|
||||
<text>camera</text>
|
||||
</view>
|
||||
<view class="iconfont icon-cameraadd">
|
||||
<text>camera_add</text>
|
||||
</view>
|
||||
<view class="iconfont icon-cameraaddfill">
|
||||
<text>camera_add_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-camerafill">
|
||||
<text>camera_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-camerarotate">
|
||||
<text>camera_rotate</text>
|
||||
</view>
|
||||
<view class="iconfont icon-cardboard">
|
||||
<text>cardboard</text>
|
||||
</view>
|
||||
<view class="iconfont icon-cardboardfill">
|
||||
<text>cardboard_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-cardboardforbid">
|
||||
<text>cardboard_forbid</text>
|
||||
</view>
|
||||
<view class="iconfont icon-cart">
|
||||
<text>cart</text>
|
||||
</view>
|
||||
<view class="iconfont icon-cartfill">
|
||||
<text>cart_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-cascades">
|
||||
<text>cascades</text>
|
||||
</view>
|
||||
<view class="iconfont icon-check">
|
||||
<text>check</text>
|
||||
</view>
|
||||
<view class="iconfont icon-choiceness">
|
||||
<text>choiceness</text>
|
||||
</view>
|
||||
<view class="iconfont icon-choicenessfill">
|
||||
<text>choiceness_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-circle">
|
||||
<text>circle</text>
|
||||
</view>
|
||||
<view class="iconfont icon-circlefill">
|
||||
<text>circle_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-close">
|
||||
<text>close</text>
|
||||
</view>
|
||||
<view class="iconfont icon-clothes">
|
||||
<text>clothes</text>
|
||||
</view>
|
||||
<view class="iconfont icon-clothesfill">
|
||||
<text>clothes_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-coin">
|
||||
<text>coin</text>
|
||||
</view>
|
||||
<view class="iconfont icon-command">
|
||||
<text>command</text>
|
||||
</view>
|
||||
<view class="iconfont icon-commandfill">
|
||||
<text>command_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-comment">
|
||||
<text>comment</text>
|
||||
</view>
|
||||
<view class="iconfont icon-commentfill">
|
||||
<text>comment_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-community">
|
||||
<text>community</text>
|
||||
</view>
|
||||
<view class="iconfont icon-communityfill">
|
||||
<text>community_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-copy">
|
||||
<text>copy</text>
|
||||
</view>
|
||||
<view class="iconfont icon-countdown">
|
||||
<text>countdown</text>
|
||||
</view>
|
||||
<view class="iconfont icon-countdownfill">
|
||||
<text>countdown_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-creative">
|
||||
<text>creative</text>
|
||||
</view>
|
||||
<view class="iconfont icon-creativefill">
|
||||
<text>creative_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-crown">
|
||||
<text>crown</text>
|
||||
</view>
|
||||
<view class="iconfont icon-crownfill">
|
||||
<text>crown_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-cut">
|
||||
<text>cut</text>
|
||||
</view>
|
||||
<view class="iconfont icon-delete">
|
||||
<text>delete</text>
|
||||
</view>
|
||||
<view class="iconfont icon-deletefill">
|
||||
<text>delete_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-deliver">
|
||||
<text>deliver</text>
|
||||
</view>
|
||||
<view class="iconfont icon-deliver_fill">
|
||||
<text>deliver_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-discover">
|
||||
<text>discover</text>
|
||||
</view>
|
||||
<view class="iconfont icon-discoverfill">
|
||||
<text>discover_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-down">
|
||||
<text>down</text>
|
||||
</view>
|
||||
<view class="iconfont icon-edit">
|
||||
<text>edit</text>
|
||||
</view>
|
||||
<view class="iconfont icon-emoji">
|
||||
<text>emoji</text>
|
||||
</view>
|
||||
<view class="iconfont icon-emojifill">
|
||||
<text>emoji_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-emojiflashfill">
|
||||
<text>emoji_flash_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-evaluate">
|
||||
<text>evaluate</text>
|
||||
</view>
|
||||
<view class="iconfont icon-evaluate_fill">
|
||||
<text>evaluate_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-exit">
|
||||
<text>exit</text>
|
||||
</view>
|
||||
<view class="iconfont icon-explore">
|
||||
<text>explore</text>
|
||||
</view>
|
||||
<view class="iconfont icon-explorefill">
|
||||
<text>explore_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-expressman">
|
||||
<text>expressman</text>
|
||||
</view>
|
||||
<view class="iconfont icon-favor">
|
||||
<text>favor</text>
|
||||
</view>
|
||||
<view class="iconfont icon-favorfill">
|
||||
<text>favor_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-female">
|
||||
<text>female</text>
|
||||
</view>
|
||||
<view class="iconfont icon-file">
|
||||
<text>file</text>
|
||||
</view>
|
||||
<view class="iconfont icon-filter">
|
||||
<text>filter</text>
|
||||
</view>
|
||||
<view class="iconfont icon-flashbuyfill">
|
||||
<text>flashbuy_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-flashlightclose">
|
||||
<text>flashlight_close</text>
|
||||
</view>
|
||||
<view class="iconfont icon-flashlightopen">
|
||||
<text>flashlight_open</text>
|
||||
</view>
|
||||
<view class="iconfont icon-focus">
|
||||
<text>focus</text>
|
||||
</view>
|
||||
<view class="iconfont icon-fold">
|
||||
<text>fold</text>
|
||||
</view>
|
||||
<view class="iconfont icon-footprint">
|
||||
<text>footprint</text>
|
||||
</view>
|
||||
<view class="iconfont icon-form">
|
||||
<text>form</text>
|
||||
</view>
|
||||
<view class="iconfont icon-formfill">
|
||||
<text>form_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-forward">
|
||||
<text>forward</text>
|
||||
</view>
|
||||
<view class="iconfont icon-forwardfill">
|
||||
<text>forward_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-friend">
|
||||
<text>friend</text>
|
||||
</view>
|
||||
<view class="iconfont icon-friendadd">
|
||||
<text>friend_add</text>
|
||||
</view>
|
||||
<view class="iconfont icon-friendaddfill">
|
||||
<text>friend_add_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-friendfamous">
|
||||
<text>friend_famous</text>
|
||||
</view>
|
||||
<view class="iconfont icon-friendfavor">
|
||||
<text>friend_favor</text>
|
||||
</view>
|
||||
<view class="iconfont icon-friendfill">
|
||||
<text>friend_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-full">
|
||||
<text>full</text>
|
||||
</view>
|
||||
<view class="iconfont icon-game">
|
||||
<text>game</text>
|
||||
</view>
|
||||
<view class="iconfont icon-global">
|
||||
<text>global</text>
|
||||
</view>
|
||||
<view class="iconfont icon-goods">
|
||||
<text>goods</text>
|
||||
</view>
|
||||
<view class="iconfont icon-goodsfavor">
|
||||
<text>goods_favor</text>
|
||||
</view>
|
||||
<view class="iconfont icon-goodsfill">
|
||||
<text>goods_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-goodsnew">
|
||||
<text>goods_new</text>
|
||||
</view>
|
||||
<view class="iconfont icon-goodsnewfill">
|
||||
<text>goods_new_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-group">
|
||||
<text>group</text>
|
||||
</view>
|
||||
<view class="iconfont icon-group_fill">
|
||||
<text>group_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-home">
|
||||
<text>home</text>
|
||||
</view>
|
||||
<view class="iconfont icon-homefill">
|
||||
<text>home_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-hot">
|
||||
<text>hot</text>
|
||||
</view>
|
||||
<view class="iconfont icon-hotfill">
|
||||
<text>hot_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-info">
|
||||
<text>info</text>
|
||||
</view>
|
||||
<view class="iconfont icon-infofill">
|
||||
<text>info_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-keyboard">
|
||||
<text>keyboard</text>
|
||||
</view>
|
||||
<view class="iconfont icon-light">
|
||||
<text>light</text>
|
||||
</view>
|
||||
<view class="iconfont icon-lightauto">
|
||||
<text>light_auto</text>
|
||||
</view>
|
||||
<view class="iconfont icon-lightfill">
|
||||
<text>light_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-lightforbid">
|
||||
<text>light_forbid</text>
|
||||
</view>
|
||||
<view class="iconfont icon-like">
|
||||
<text>like</text>
|
||||
</view>
|
||||
<view class="iconfont icon-likefill">
|
||||
<text>like_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-link">
|
||||
<text>link</text>
|
||||
</view>
|
||||
<view class="iconfont icon-list">
|
||||
<text>list</text>
|
||||
</view>
|
||||
<view class="iconfont icon-loading">
|
||||
<text>loading</text>
|
||||
</view>
|
||||
<view class="iconfont icon-location">
|
||||
<text>location</text>
|
||||
</view>
|
||||
<view class="iconfont icon-locationfill">
|
||||
<text>location_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-lock">
|
||||
<text>lock</text>
|
||||
</view>
|
||||
<view class="iconfont icon-magic">
|
||||
<text>magic</text>
|
||||
</view>
|
||||
<view class="iconfont icon-mail">
|
||||
<text>mail</text>
|
||||
</view>
|
||||
<view class="iconfont icon-male">
|
||||
<text>male</text>
|
||||
</view>
|
||||
<view class="iconfont icon-mark">
|
||||
<text>mark</text>
|
||||
</view>
|
||||
<view class="iconfont icon-markfill">
|
||||
<text>mark_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-medal">
|
||||
<text>medal</text>
|
||||
</view>
|
||||
<view class="iconfont icon-medalfill">
|
||||
<text>medal_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-message">
|
||||
<text>message</text>
|
||||
</view>
|
||||
<view class="iconfont icon-messagefill">
|
||||
<text>message_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-mobile">
|
||||
<text>mobile</text>
|
||||
</view>
|
||||
<view class="iconfont icon-mobilefill">
|
||||
<text>mobile_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-moneybag">
|
||||
<text>money_bag</text>
|
||||
</view>
|
||||
<view class="iconfont icon-moneybagfill">
|
||||
<text>money_bag_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-more">
|
||||
<text>more</text>
|
||||
</view>
|
||||
<view class="iconfont icon-moreandroid">
|
||||
<text>more_android</text>
|
||||
</view>
|
||||
<view class="iconfont icon-move">
|
||||
<text>move</text>
|
||||
</view>
|
||||
<view class="iconfont icon-musicfill">
|
||||
<text>music_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-musicforbidfill">
|
||||
<text>music_forbid_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-my">
|
||||
<text>my</text>
|
||||
</view>
|
||||
<view class="iconfont icon-myfill">
|
||||
<text>my_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-new">
|
||||
<text>new</text>
|
||||
</view>
|
||||
<view class="iconfont icon-newfill">
|
||||
<text>new_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-news">
|
||||
<text>news</text>
|
||||
</view>
|
||||
<view class="iconfont icon-newsfill">
|
||||
<text>news_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-newshot">
|
||||
<text>news_hot</text>
|
||||
</view>
|
||||
<view class="iconfont icon-newshotfill">
|
||||
<text>news_hot_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-notice">
|
||||
<text>notice</text>
|
||||
</view>
|
||||
<view class="iconfont icon-noticefill">
|
||||
<text>notice_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-notice_forbid_fill">
|
||||
<text>notice_forbid_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-notification">
|
||||
<text>notification</text>
|
||||
</view>
|
||||
<view class="iconfont icon-notificationfill">
|
||||
<text>notification_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-notificationforbidfill">
|
||||
<text>notification_forbid_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-order">
|
||||
<text>order</text>
|
||||
</view>
|
||||
<view class="iconfont icon-paint">
|
||||
<text>paint</text>
|
||||
</view>
|
||||
<view class="iconfont icon-paintfill">
|
||||
<text>paint_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-pay">
|
||||
<text>pay</text>
|
||||
</view>
|
||||
<view class="iconfont icon-people">
|
||||
<text>people</text>
|
||||
</view>
|
||||
<view class="iconfont icon-peoplefill">
|
||||
<text>people_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-peoplelist">
|
||||
<text>people_list</text>
|
||||
</view>
|
||||
<view class="iconfont icon-phone">
|
||||
<text>phone</text>
|
||||
</view>
|
||||
<view class="iconfont icon-pic">
|
||||
<text>pic</text>
|
||||
</view>
|
||||
<view class="iconfont icon-picfill">
|
||||
<text>pic_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-pick">
|
||||
<text>pick</text>
|
||||
</view>
|
||||
<view class="iconfont icon-playfill">
|
||||
<text>play_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-play_forward_fill">
|
||||
<text>play_forward_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-post">
|
||||
<text>post</text>
|
||||
</view>
|
||||
<view class="iconfont icon-present">
|
||||
<text>present</text>
|
||||
</view>
|
||||
<view class="iconfont icon-presentfill">
|
||||
<text>present_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-profile">
|
||||
<text>profile</text>
|
||||
</view>
|
||||
<view class="iconfont icon-profilefill">
|
||||
<text>profile_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-pulldown">
|
||||
<text>pull_down</text>
|
||||
</view>
|
||||
<view class="iconfont icon-pullleft">
|
||||
<text>pull_left</text>
|
||||
</view>
|
||||
<view class="iconfont icon-pullright">
|
||||
<text>pull_right</text>
|
||||
</view>
|
||||
<view class="iconfont icon-pullup">
|
||||
<text>pull_up</text>
|
||||
</view>
|
||||
<view class="iconfont icon-punch">
|
||||
<text>punch</text>
|
||||
</view>
|
||||
<view class="iconfont icon-qrcode">
|
||||
<text>qr_code</text>
|
||||
</view>
|
||||
<view class="iconfont icon-question">
|
||||
<text>question</text>
|
||||
</view>
|
||||
<view class="iconfont icon-questionfill">
|
||||
<text>question_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-radiobox">
|
||||
<text>radio_box</text>
|
||||
</view>
|
||||
<view class="iconfont icon-radioboxfill">
|
||||
<text>radio_box_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-rank">
|
||||
<text>rank</text>
|
||||
</view>
|
||||
<view class="iconfont icon-rankfill">
|
||||
<text>rank_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-read">
|
||||
<text>read</text>
|
||||
</view>
|
||||
<view class="iconfont icon-recharge">
|
||||
<text>recharge</text>
|
||||
</view>
|
||||
<view class="iconfont icon-rechargefill">
|
||||
<text>recharge_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-record">
|
||||
<text>record</text>
|
||||
</view>
|
||||
<view class="iconfont icon-recordfill">
|
||||
<text>record_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-redpacket">
|
||||
<text>redpacket</text>
|
||||
</view>
|
||||
<view class="iconfont icon-redpacket_fill">
|
||||
<text>redpacket_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-refresh">
|
||||
<text>refresh</text>
|
||||
</view>
|
||||
<view class="iconfont icon-refresharrow">
|
||||
<text>refresh_arrow</text>
|
||||
</view>
|
||||
<view class="iconfont icon-refund">
|
||||
<text>refund</text>
|
||||
</view>
|
||||
<view class="iconfont icon-remind">
|
||||
<text>remind</text>
|
||||
</view>
|
||||
<view class="iconfont icon-repair">
|
||||
<text>repair</text>
|
||||
</view>
|
||||
<view class="iconfont icon-repairfill">
|
||||
<text>repair_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-repeal">
|
||||
<text>repeal</text>
|
||||
</view>
|
||||
<view class="iconfont icon-right">
|
||||
<text>right</text>
|
||||
</view>
|
||||
<view class="iconfont icon-round">
|
||||
<text>round</text>
|
||||
</view>
|
||||
<view class="iconfont icon-roundadd">
|
||||
<text>round_add</text>
|
||||
</view>
|
||||
<view class="iconfont icon-roundaddfill">
|
||||
<text>round_add_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-roundcheck">
|
||||
<text>round_check</text>
|
||||
</view>
|
||||
<view class="iconfont icon-roundcheckfill">
|
||||
<text>round_check_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-roundclose">
|
||||
<text>round_close</text>
|
||||
</view>
|
||||
<view class="iconfont icon-roundclosefill">
|
||||
<text>round_close_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-rounddown">
|
||||
<text>round_down</text>
|
||||
</view>
|
||||
<view class="iconfont icon-roundleftfill-copy">
|
||||
<text>round_left_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-roundright">
|
||||
<text>round_right</text>
|
||||
</view>
|
||||
<view class="iconfont icon-roundrightfill">
|
||||
<text>round_right_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-safe">
|
||||
<text>safe</text>
|
||||
</view>
|
||||
<view class="iconfont icon-same">
|
||||
<text>same</text>
|
||||
</view>
|
||||
<view class="iconfont icon-samefill">
|
||||
<text>same_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-scan">
|
||||
<text>scan</text>
|
||||
</view>
|
||||
<view class="iconfont icon-search">
|
||||
<text>search</text>
|
||||
</view>
|
||||
<view class="iconfont icon-searchlist">
|
||||
<text>search_list</text>
|
||||
</view>
|
||||
<view class="iconfont icon-selection">
|
||||
<text>selection</text>
|
||||
</view>
|
||||
<view class="iconfont icon-selectionfill">
|
||||
<text>selection_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-send">
|
||||
<text>send</text>
|
||||
</view>
|
||||
<view class="iconfont icon-service">
|
||||
<text>service</text>
|
||||
</view>
|
||||
<view class="iconfont icon-servicefill">
|
||||
<text>service_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-settings">
|
||||
<text>settings</text>
|
||||
</view>
|
||||
<view class="iconfont icon-shake">
|
||||
<text>shake</text>
|
||||
</view>
|
||||
<view class="iconfont icon-share">
|
||||
<text>share</text>
|
||||
</view>
|
||||
<view class="iconfont icon-shop">
|
||||
<text>shop</text>
|
||||
</view>
|
||||
<view class="iconfont icon-shopfill">
|
||||
<text>shop_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-similar">
|
||||
<text>similar</text>
|
||||
</view>
|
||||
<view class="iconfont icon-skin">
|
||||
<text>skin</text>
|
||||
</view>
|
||||
<view class="iconfont icon-skinfill">
|
||||
<text>skin_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-sort">
|
||||
<text>sort</text>
|
||||
</view>
|
||||
<view class="iconfont icon-sound">
|
||||
<text>sound</text>
|
||||
</view>
|
||||
<view class="iconfont icon-sponsor">
|
||||
<text>sponsor</text>
|
||||
</view>
|
||||
<view class="iconfont icon-sponsorfill">
|
||||
<text>sponsor_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-square">
|
||||
<text>square</text>
|
||||
</view>
|
||||
<view class="iconfont icon-squarecheck">
|
||||
<text>square_check</text>
|
||||
</view>
|
||||
<view class="iconfont icon-squarecheckfill">
|
||||
<text>square_check_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-stop">
|
||||
<text>stop</text>
|
||||
</view>
|
||||
<view class="iconfont icon-subscription">
|
||||
<text>subscription</text>
|
||||
</view>
|
||||
<view class="iconfont icon-tag">
|
||||
<text>tag</text>
|
||||
</view>
|
||||
<view class="iconfont icon-tagfill">
|
||||
<text>tag_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-taoxiaopu">
|
||||
<text>taoxiaopu</text>
|
||||
</view>
|
||||
<view class="iconfont icon-taxi">
|
||||
<text>taxi</text>
|
||||
</view>
|
||||
<view class="iconfont icon-text">
|
||||
<text>text</text>
|
||||
</view>
|
||||
<view class="iconfont icon-ticket">
|
||||
<text>ticket</text>
|
||||
</view>
|
||||
<view class="iconfont icon-time">
|
||||
<text>time</text>
|
||||
</view>
|
||||
<view class="iconfont icon-timefill">
|
||||
<text>time_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-top">
|
||||
<text>top</text>
|
||||
</view>
|
||||
<view class="iconfont icon-triangledownfill">
|
||||
<text>triangle_down_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-triangleupfill">
|
||||
<text>triangle_up_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-unfold">
|
||||
<text>unfold</text>
|
||||
</view>
|
||||
<view class="iconfont icon-unlock">
|
||||
<text>unlock</text>
|
||||
</view>
|
||||
<view class="iconfont icon-upblock">
|
||||
<text>up_block</text>
|
||||
</view>
|
||||
<view class="iconfont icon-upload">
|
||||
<text>upload</text>
|
||||
</view>
|
||||
<view class="iconfont icon-upstage">
|
||||
<text>upstage</text>
|
||||
</view>
|
||||
<view class="iconfont icon-upstagefill">
|
||||
<text>upstage_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-usefull">
|
||||
<text>usefull</text>
|
||||
</view>
|
||||
<view class="iconfont icon-usefullfill">
|
||||
<text>usefull_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-video">
|
||||
<text>video</text>
|
||||
</view>
|
||||
<view class="iconfont icon-videofill">
|
||||
<text>video_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-vip">
|
||||
<text>vip</text>
|
||||
</view>
|
||||
<view class="iconfont icon-vipcard">
|
||||
<text>vipcard</text>
|
||||
</view>
|
||||
<view class="iconfont icon-voice">
|
||||
<text>voice</text>
|
||||
</view>
|
||||
<view class="iconfont icon-voicefill">
|
||||
<text>voice_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-wang">
|
||||
<text>wang</text>
|
||||
</view>
|
||||
<view class="iconfont icon-wangfill">
|
||||
<text>wang_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-warn">
|
||||
<text>warn</text>
|
||||
</view>
|
||||
<view class="iconfont icon-warnfill">
|
||||
<text>warn_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-we">
|
||||
<text>we</text>
|
||||
</view>
|
||||
<view class="iconfont icon-weblock">
|
||||
<text>we_block</text>
|
||||
</view>
|
||||
<view class="iconfont icon-wefill">
|
||||
<text>we_fill</text>
|
||||
</view>
|
||||
<view class="iconfont icon-weunblock">
|
||||
<text>we_unblock</text>
|
||||
</view>
|
||||
<view class="iconfont icon-weibo">
|
||||
<text>weibo</text>
|
||||
</view>
|
||||
<view class="iconfont icon-wifi">
|
||||
<text>wifi</text>
|
||||
</view>
|
||||
<view class="iconfont icon-write">
|
||||
<text>write</text>
|
||||
</view>
|
||||
<view class="iconfont icon-writefill">
|
||||
<text>write_fill</text>
|
||||
</view>
|
||||
</view>
|
||||
30
pages/icon/icon.wxss
Normal file
30
pages/icon/icon.wxss
Normal file
@@ -0,0 +1,30 @@
|
||||
.doc-icon-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.doc-icon-list .iconfont {
|
||||
width: 33.33%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
border-right: 1rpx solid #eee;
|
||||
border-top: 1rpx solid #eee;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.doc-icon-list .iconfont:nth-child(3n) {
|
||||
border-right: 0rpx solid #eee;
|
||||
}
|
||||
|
||||
.doc-icon-list .iconfont::before {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.doc-icon-list .iconfont text {
|
||||
display: block;
|
||||
color: #aaa;
|
||||
font-size: 24rpx;
|
||||
line-height: 60rpx;
|
||||
font-family: Arial, -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
|
||||
}
|
||||
5
pages/image/image.js
Normal file
5
pages/image/image.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/document/image/image.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
1
pages/image/image.json
Normal file
1
pages/image/image.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
75
pages/image/image.wxml
Normal file
75
pages/image/image.wxml
Normal file
@@ -0,0 +1,75 @@
|
||||
<view class="bar solid-bottom">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>基础形状</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='text-center'>
|
||||
<image src='http://image.weilanwl.com/img/square-4.jpg' mode='widthFix' class='radius mr-df' style='width:280rpx;'></image>
|
||||
<image src='http://image.weilanwl.com/img/square-3.jpg' mode='widthFix' class='round' style='width:280rpx;'></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>尺寸大小</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="doc-main">
|
||||
<view class='text-center'>
|
||||
<image src='http://image.weilanwl.com/img/square-1.jpg' mode='widthFix' class='round mr-df img-xs'></image>
|
||||
<image src='http://image.weilanwl.com/img/square-2.jpg' mode='widthFix' class='round mr-df img-sm'></image>
|
||||
<image src='http://image.weilanwl.com/img/square-3.jpg' mode='widthFix' class='round mr-df img-df'></image>
|
||||
<image src='http://image.weilanwl.com/img/square-4.jpg' mode='widthFix' class='round mr-df img-lg'></image>
|
||||
<image src='http://image.weilanwl.com/img/square-1.jpg' mode='widthFix' class='round img-xl'></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>百分百图片</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class='text-center'>
|
||||
<image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='widthFix' class='img-block'></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>宫格图片</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="lattice-image">
|
||||
<view>
|
||||
<image src='http://image.weilanwl.com/img/4x3-2.jpg' mode='aspectFill'></image>
|
||||
</view>
|
||||
<view style="background-image:url('http://image.weilanwl.com/img/4x3-3.jpg')">
|
||||
<view class='iconfont icon-close'></view>
|
||||
</view>
|
||||
<view style="background-image:url('http://image.weilanwl.com/img/4x3-4.jpg')"></view>
|
||||
<view>
|
||||
<view class='iconfont icon-upload'></view>
|
||||
<image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='aspectFill'></image>
|
||||
</view>
|
||||
<view>
|
||||
<image src='http://image.weilanwl.com/img/3x4-4.jpg' mode='aspectFill'></image>
|
||||
</view>
|
||||
<view>
|
||||
<image src='http://image.weilanwl.com/img/3x4-1.jpg' mode='aspectFill'></image>
|
||||
</view>
|
||||
<view>
|
||||
<image src='http://image.weilanwl.com/img/3x4-2.jpg' mode='aspectFill'></image>
|
||||
</view>
|
||||
<view>
|
||||
<image src='http://image.weilanwl.com/img/3x4-3.jpg' mode='aspectFill'></image>
|
||||
</view>
|
||||
<view class='lattice-btn'>
|
||||
<text class='iconfont icon-pic'></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
3
pages/image/image.wxss
Normal file
3
pages/image/image.wxss
Normal file
@@ -0,0 +1,3 @@
|
||||
page{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
39
pages/index/index.js
Normal file
39
pages/index/index.js
Normal file
@@ -0,0 +1,39 @@
|
||||
//index.js
|
||||
//获取应用实例
|
||||
const app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
desc: { image: '/images/index.png', text: '鲜亮的高饱和色彩，专注视觉的小程序组件库' },
|
||||
elements: [
|
||||
{ title: '布局', name: 'layout' },
|
||||
{ title: '按钮', name: 'button' },
|
||||
{ title: '徽章', name: 'badge' },
|
||||
{ title: '边框', name: 'border' },
|
||||
{ title: '文本', name: 'text' },
|
||||
{ title: '图标 ', name: 'icon' },
|
||||
{ title: '加载', name: 'loading' },
|
||||
{ title: '图片 ', name: 'image' },
|
||||
],
|
||||
modules: [
|
||||
{ title: '操作条', name: 'bar' },
|
||||
{ title: '表单', name: 'form' },
|
||||
{ title: '导航条 ', name: 'nav' },
|
||||
{ title: '列表项', name: 'item' },
|
||||
{ title: '列表 ', name: 'list' },
|
||||
{ title: '侧边栏', name: 'side' },
|
||||
{ title: '评论 ', name: 'comment' },
|
||||
{ title: '时间线', name: 'timeline' },
|
||||
{ title: '轮播 ', name: 'slider' },
|
||||
{ title: '评分', name: 'rating' },
|
||||
{ title: '弹出框 ', name: 'modal' },
|
||||
{ title: '进度条 ', name: 'progress' },
|
||||
{ title: '聊天 ', name: 'chat' },
|
||||
],
|
||||
userinfo: []
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
}
|
||||
})
|
||||
3
pages/index/index.json
Normal file
3
pages/index/index.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"enablePullDownRefresh":false
|
||||
}
|
||||
22
pages/index/index.wxml
Normal file
22
pages/index/index.wxml
Normal file
@@ -0,0 +1,22 @@
|
||||
<view class="desc">
|
||||
<image src="{{desc.image}}" mode="widthFix" class="indexImage"></image>
|
||||
<text>{{desc.text}}</text>
|
||||
</view>
|
||||
|
||||
<view class='title'>Elements 元素</view>
|
||||
<navigator url="../{{item.name}}/{{item.name}}" class="nav-list" wx:for="{{elements}}" wx:key="{{index}}">
|
||||
<view class="nav-title">{{item.title}}</view>
|
||||
<view class="nav-name">{{item.name}}</view>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</navigator>
|
||||
|
||||
<view class='title'>Modules 模块</view>
|
||||
<navigator url="../{{item.name}}/{{item.name}}" class="nav-list" wx:for="{{modules}}" wx:key="{{index}}">
|
||||
<view class="nav-title">{{item.title}}</view>
|
||||
<view class="nav-name">{{item.name}}</view>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</navigator>
|
||||
<view class="foot-text">
|
||||
<text class="iconfont icon-discover"></text>
|
||||
<text> https://color.weilanwl.com/</text>
|
||||
</view>
|
||||
18
pages/index/index.wxss
Normal file
18
pages/index/index.wxss
Normal file
@@ -0,0 +1,18 @@
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.foot-text {
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.title{
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #888;
|
||||
}
|
||||
.nav-list + .title {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
5
pages/item/item.js
Normal file
5
pages/item/item.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/document/item/item.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
1
pages/item/item.json
Normal file
1
pages/item/item.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
219
pages/item/item.wxml
Normal file
219
pages/item/item.wxml
Normal file
@@ -0,0 +1,219 @@
|
||||
|
||||
<view class='column-box'>
|
||||
<view class='column-li'>
|
||||
<image src='http://www.diwuyuan.com/attachs/case/137/201803/20180319_7E4E388763E70039631E31B9F9BB8A42.jpg_thumb.png' mode='widthFix'></image>
|
||||
</view>
|
||||
<view class='column-li'>
|
||||
<image src='http://www.diwuyuan.com/attachs/case/137/201803/20180319_06C12D2703D564BAC06F2BCC311E9440.jpg_thumb.png' mode='widthFix'></image>
|
||||
</view>
|
||||
<view class='column-li'>
|
||||
<image src='http://www.diwuyuan.com/attachs/case/18/201801/20180123_C4B1DD3B9D4326F9458A1C11FAFD23F6.jpg_thumb.png' mode='widthFix'></image>
|
||||
</view>
|
||||
<view class='column-li'>
|
||||
<image src='http://www.diwuyuan.com/attachs/case/18/201801/20180123_5B3C4F1DAFB8F86186B50D18919A7BA8.jpg_thumb.png' mode='widthFix'></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class='order-box'>
|
||||
<view class='order-item'>
|
||||
<view class='order-bar justify-between'>
|
||||
<view class='ml-sm'>喵星酱的杂货铺
|
||||
<text class='iconfont icon-right'></text> </view>
|
||||
<view class='warning-text mr-sm'>等待付款</view>
|
||||
</view>
|
||||
<view class='goods-main'>
|
||||
<image src='http://image.weilanwl.com/img/square-1.jpg' mode='aspectFill' class='goods-list-img'></image>
|
||||
<view class='goods-text'>
|
||||
<view class=''>非常可爱的喵咪爬架 喵星酱特价供货</view>
|
||||
<view class='gray-text text-sm'>主子爱不释爪的首选</view>
|
||||
<view class='mt-xs'>
|
||||
<text class='badge danger round mr-sm'>爬架</text>
|
||||
<text class='badge success round'>喵星酱</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='goods-info'>
|
||||
<view class='price'>¥ 520.00</view>
|
||||
<view class='del-price'>¥ 1314.00</view>
|
||||
<view class='goods-num'>x 2</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='pt-sm pr-sm text-right'>
|
||||
共2件商品 合计:￥2360.00 (含运费￥)
|
||||
</view>
|
||||
<view class='flex p-sm justify-end'>
|
||||
<view class=''>
|
||||
<button class='gray btn mr-sm'>查看详情</button>
|
||||
<button class='warning btn'>立即付款</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='item-list-box mt-sm'>
|
||||
<view class="goods-list-li">
|
||||
<view class='goods-list-main'>
|
||||
<image src='http://image.weilanwl.com/img/4x4.jpg' mode='aspectFill' class='goods-list-img'></image>
|
||||
<view class='goods-list-text'>
|
||||
<view class='goods-list-top'>
|
||||
<view class='text-lg'>【新品首发】微信小程序前端定制化服务 </view>
|
||||
<view class='gray-text'>ColorUi规范 精简 高效</view>
|
||||
</view>
|
||||
<view class='goods-list-foot'>
|
||||
<view class='goods-list-price'>0.01
|
||||
<text class='gray-text'>9689</text>
|
||||
</view>
|
||||
<button class='danger btn sm'> 去购买
|
||||
<text class='iconfont icon-right'></text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="case-list-li">
|
||||
<view class="case-list-img">
|
||||
<image src="http://image.weilanwl.com/img/4x3-1.jpg" mode="widthFix"></image>
|
||||
<view class="case-list-badge">标签</view>
|
||||
<view class="case-list-title">小主子卖萌熊猫套装</view>
|
||||
</view>
|
||||
<view class="item-list-data">
|
||||
<image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
|
||||
<view class='item-list-author'>
|
||||
<view class="item-list-name">文晓港
|
||||
<text>/ 伪铲屎官</text>
|
||||
</view>
|
||||
<view class="item-list-info">
|
||||
<text class="iconfont icon-timefill"> 十天前</text>
|
||||
<view class="item-list-num">
|
||||
<text class="iconfont icon-attentionfill"> 10</text>
|
||||
<text class="iconfont icon-favorfill"> 20</text>
|
||||
<text class="iconfont icon-messagefill"> 30</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="article-list-li">
|
||||
<view class="article-list-title">这里有个戏精铲屎官，主子了解一下？</view>
|
||||
<view class="article-list-content">
|
||||
<view class="article-list-thumbs">
|
||||
<image src="http://image.weilanwl.com/img/4x3-3.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="article-list-desc">
|
||||
<view class='article-list-text'> 这是一个伪铲屎官为了给自己的程序凑字数瞎几把乱写的一堆文字，了解一下就OK！ヾ(=･ω･=)o</view>
|
||||
<view class="article-list-tag">
|
||||
<view class='badge danger round mr-sm'>假装有猫系列</view>
|
||||
<view class='badge success round'>戏精系列</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-list-data">
|
||||
<image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
|
||||
<view class='item-list-author'>
|
||||
<view class="item-list-name">文晓港
|
||||
<text>/ 程序员</text>
|
||||
</view>
|
||||
<view class="item-list-info">
|
||||
<text class="iconfont icon-timefill"> 十天前</text>
|
||||
<view class="item-list-num">
|
||||
<text class="iconfont icon-attentionfill"> 10</text>
|
||||
<text class="iconfont icon-favorfill"> 20</text>
|
||||
<text class="iconfont icon-messagefill"> 30</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="article-list-li">
|
||||
<view class="article-list-title">这是没有图片的文章列表项的标题</view>
|
||||
<view class="article-list-content">
|
||||
<view class="article-list-desc">
|
||||
<view class='article-list-text'>其实吧，做程序员也不都是枯燥乏味的，比如我吧，为了写段话在这里凑字数也是很开心的呀，嘻嘻嘻！求关注！持续更新组件...</view>
|
||||
<view class="article-list-tag">
|
||||
<view class='badge warning round'># 严肃脸 #</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-list-data">
|
||||
<image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
|
||||
<view class='item-list-author'>
|
||||
<view class="item-list-name">文晓港
|
||||
<text>/ 90后</text>
|
||||
</view>
|
||||
<view class="item-list-info">
|
||||
<text class="iconfont icon-timefill"> 十天前</text>
|
||||
<view class="item-list-num">
|
||||
<text class="iconfont icon-attentionfill"> 10</text>
|
||||
<text class="iconfont icon-favorfill"> 20</text>
|
||||
<text class="iconfont icon-messagefill"> 30</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class='card-list-box'>
|
||||
<view class="ins-list-li">
|
||||
<view class="ins-list-img">
|
||||
<image src="http://image.weilanwl.com/img/3x4-1.jpg" mode="widthFix"></image>
|
||||
<view class="ins-list-num">
|
||||
<text class="iconfont icon-attentionfill">10</text>
|
||||
<text class="iconfont icon-favorfill">20</text>
|
||||
<text class="iconfont icon-picfill">30</text>
|
||||
</view>
|
||||
<view class="ins-list-title">小兔几</view>
|
||||
</view>
|
||||
<view class="ins-list-author">
|
||||
<image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
|
||||
<view class="ins-list-name">文晓港</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ins-list-li">
|
||||
<view class="ins-list-img">
|
||||
<image src="http://image.weilanwl.com/img/3x4-2.jpg" mode="widthFix"></image>
|
||||
<view class="ins-list-num">
|
||||
<text class="iconfont icon-attentionfill">10</text>
|
||||
<text class="iconfont icon-favorfill">20</text>
|
||||
<text class="iconfont icon-picfill">30</text>
|
||||
</view>
|
||||
<view class="ins-list-title">瓜皮的id酱的照片</view>
|
||||
</view>
|
||||
<view class="ins-list-author">
|
||||
<image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
|
||||
<view class="ins-list-name">文晓港</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ins-list-li">
|
||||
<view class="ins-list-img">
|
||||
<image src="http://image.weilanwl.com/img/3x4-3.jpg" mode="widthFix"></image>
|
||||
<view class="ins-list-num">
|
||||
<text class="iconfont icon-attentionfill"> 10</text>
|
||||
<text class="iconfont icon-favorfill"> 20</text>
|
||||
<text class="iconfont icon-picfill"> 30</text>
|
||||
</view>
|
||||
<view class="ins-list-title">求收养</view>
|
||||
</view>
|
||||
<view class="ins-list-author">
|
||||
<image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
|
||||
<view class="ins-list-name">文晓港</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ins-list-li">
|
||||
<view class="ins-list-img">
|
||||
<image src="http://image.weilanwl.com/img/3x4-4.jpg" mode="widthFix"></image>
|
||||
<view class="ins-list-num">
|
||||
<text class="iconfont icon-attentionfill"> 10</text>
|
||||
<text class="iconfont icon-favorfill"> 20</text>
|
||||
<text class="iconfont icon-picfill"> 30</text>
|
||||
</view>
|
||||
<view class="ins-list-title">小主子和Ta的玩具.jpg</view>
|
||||
</view>
|
||||
<view class="ins-list-author">
|
||||
<image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
|
||||
<view class="ins-list-name">文晓港</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
3
pages/item/item.wxss
Normal file
3
pages/item/item.wxss
Normal file
@@ -0,0 +1,3 @@
|
||||
page{
|
||||
background: #f1f1f1;
|
||||
}
|
||||
5
pages/label/label.js
Normal file
5
pages/label/label.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/document/label/label.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
1
pages/label/label.json
Normal file
1
pages/label/label.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
5
pages/label/label.wxml
Normal file
5
pages/label/label.wxml
Normal file
@@ -0,0 +1,5 @@
|
||||
<view class='screen'>
|
||||
<view class='iconfont icon-discover gray-text'>
|
||||
<view class='text-df'>组件开发中...</view>
|
||||
</view>
|
||||
</view>
|
||||
10
pages/label/label.wxss
Normal file
10
pages/label/label.wxss
Normal file
@@ -0,0 +1,10 @@
|
||||
.textarea {
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
bottom: 0;
|
||||
background: #aaa
|
||||
}
|
||||
.textarea textarea {
|
||||
background: #666
|
||||
}
|
||||
|
||||
66
pages/layout/layout.js
Normal file
66
pages/layout/layout.js
Normal file
@@ -0,0 +1,66 @@
|
||||
// pages/document/layout/layout.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
||||
3
pages/layout/layout.json
Normal file
3
pages/layout/layout.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "布局/Layout"
|
||||
}
|
||||
134
pages/layout/layout.wxml
Normal file
134
pages/layout/layout.wxml
Normal file
@@ -0,0 +1,134 @@
|
||||
<view class="bar solid-bottom">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>Flex 布局</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view>
|
||||
<text class='iconfont icon-title success-text'></text> 固定尺寸
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm flex-wrap">
|
||||
<view class='basis-xs doc-box-sub p-sm m-xs'>xs(20%)</view>
|
||||
<view class='basis-df'></view>
|
||||
<view class='basis-sm doc-box-sub p-sm m-xs'>sm(40%)</view>
|
||||
<view class='basis-df'></view>
|
||||
<view class='basis-df doc-box-sub p-sm m-xs'>sub(50%)</view>
|
||||
<view class='basis-lg doc-box-sub p-sm m-xs'>lg(60%)</view>
|
||||
<view class='basis-xl doc-box-sub p-sm m-xs'>xl(80%)</view>
|
||||
</view>
|
||||
<view>
|
||||
<text class='iconfont icon-title success-text'></text> 比例
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm">
|
||||
<view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
|
||||
<view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm">
|
||||
<view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
|
||||
<view class='flex-twice doc-box-sub p-sm m-xs'>2</view>
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm">
|
||||
<view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
|
||||
<view class='flex-twice doc-box-sub p-sm m-xs'>2</view>
|
||||
<view class='flex-treble doc-box-sub p-sm m-xs'>3</view>
|
||||
</view>
|
||||
<view>
|
||||
<text class='iconfont icon-title success-text'></text> 水平对齐
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm justify-start">
|
||||
<view class='doc-box-sub p-sm m-xs'>start</view>
|
||||
<view class='doc-box-sub p-sm m-xs'>start</view>
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm justify-end">
|
||||
<view class='doc-box-sub p-sm m-xs'>end</view>
|
||||
<view class='doc-box-sub p-sm m-xs'>end</view>
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm justify-center">
|
||||
<view class='doc-box-sub p-sm m-xs'>center</view>
|
||||
<view class='doc-box-sub p-sm m-xs'>center</view>
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm justify-between">
|
||||
<view class='doc-box-sub p-sm m-xs'>between</view>
|
||||
<view class='doc-box-sub p-sm m-xs'>between</view>
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm justify-around">
|
||||
<view class='doc-box-sub p-sm m-xs'>around</view>
|
||||
<view class='doc-box-sub p-sm m-xs'>around</view>
|
||||
</view>
|
||||
<view>
|
||||
<text class='iconfont icon-title success-text'></text> 垂直对齐
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm align-start">
|
||||
<view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
|
||||
<view class='doc-box-sub p-sm m-xs'>start</view>
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm align-end">
|
||||
<view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
|
||||
<view class='doc-box-sub p-sm m-xs'>end</view>
|
||||
</view>
|
||||
<view class="flex doc-box p-xs mt-sm mb-sm align-center">
|
||||
<view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
|
||||
<view class='doc-box-sub p-sm m-xs'>center</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar mt-sm solid-bottom">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>内外边距</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view>{size}的尺寸有xs/sm/df/lg/xl</view>
|
||||
<view class='doc-box flex flex-wrap pv-xs ph-df mt-sm'>
|
||||
<view class="basis-df">外边距</view>
|
||||
<view class="basis-df">内边距</view>
|
||||
<view class="basis-df">.m-{size}</view>
|
||||
<view class="basis-df">.p-{size}</view>
|
||||
</view>
|
||||
<view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
|
||||
<view class="basis-df">水平方向外边距</view>
|
||||
<view class="basis-df">水平方向内边距</view>
|
||||
<view class="basis-df">.mh-{size}</view>
|
||||
<view class="basis-df">.ph-{size}</view>
|
||||
</view>
|
||||
<view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
|
||||
<view class="basis-df">垂直方向外边距</view>
|
||||
<view class="basis-df">垂直方向内边距</view>
|
||||
<view class="basis-df">.mv-{size}</view>
|
||||
<view class="basis-df">.pv-{size}</view>
|
||||
</view>
|
||||
<view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
|
||||
<view class="basis-df">上外边距</view>
|
||||
<view class="basis-df">上内边距</view>
|
||||
<view class="basis-df">.mt-{size}</view>
|
||||
<view class="basis-df">.pt-{size}</view>
|
||||
</view>
|
||||
<view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
|
||||
<view class="basis-df">右外边距</view>
|
||||
<view class="basis-df">右内边距</view>
|
||||
<view class="basis-df">.mr-{size}</view>
|
||||
<view class="basis-df">.pr-{size}</view>
|
||||
</view>
|
||||
<view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
|
||||
<view class="basis-df">下外边距</view>
|
||||
<view class="basis-df">下内边距</view>
|
||||
<view class="basis-df">.mb-{size}</view>
|
||||
<view class="basis-df">.pb-{size}</view>
|
||||
</view>
|
||||
<view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
|
||||
<view class="basis-df">左外边距</view>
|
||||
<view class="basis-df">左内边距</view>
|
||||
<view class="basis-df">.ml-{size}</view>
|
||||
<view class="basis-df">.pl-{size}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar mt-sm solid-bottom">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>浮动</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="doc-box cf p-sm">
|
||||
<view class='doc-box-sub fl p-sm'>ColorUi fl</view>
|
||||
<view class='doc-box-sub fr p-sm'>ColorUi fr</view>
|
||||
</view>
|
||||
</view>
|
||||
3
pages/layout/layout.wxss
Normal file
3
pages/layout/layout.wxss
Normal file
@@ -0,0 +1,3 @@
|
||||
page{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
5
pages/list/list.js
Normal file
5
pages/list/list.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/element/list/list.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
3
pages/list/list.json
Normal file
3
pages/list/list.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "列表/list"
|
||||
}
|
||||
228
pages/list/list.wxml
Normal file
228
pages/list/list.wxml
Normal file
@@ -0,0 +1,228 @@
|
||||
<view class="user">
|
||||
<view class="user-top">
|
||||
<view class="user-img">
|
||||
<image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" class='radius'></image>
|
||||
</view>
|
||||
<view class="user-text">
|
||||
<view class="user-name">
|
||||
文晓港
|
||||
<text>切图仔</text>
|
||||
</view>
|
||||
<view class="user-sub cf">
|
||||
<navigator hover-class='none' class='gray btn xs round'>编辑资料</navigator>
|
||||
<navigator hover-class='none' class='fr'>
|
||||
<text class='iconfont icon-qrcode'></text> 个人名片</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-nav icon-nav-box">
|
||||
<view class="icon-nav">
|
||||
<navigator hover-class="none" class="icon-nav-navigator">
|
||||
<text class="iconfont icon-moneybagfill"></text>
|
||||
<text class="icon-nav-text">资金</text>
|
||||
</navigator>
|
||||
<navigator hover-class="none" class="icon-nav-navigator">
|
||||
<text class="iconfont icon-radiobox"></text>
|
||||
<text class="icon-nav-text">圈子</text>
|
||||
</navigator>
|
||||
<navigator hover-class="none" class="icon-nav-navigator">
|
||||
<text class="iconfont icon-cartfill"><text class='badge mark-badge'>9</text></text>
|
||||
<text class="icon-nav-text">购物车</text>
|
||||
</navigator>
|
||||
<navigator hover-class="none" class="icon-nav-navigator">
|
||||
<text class="iconfont icon-messagefill"><text class='badge mark-badge'>99+</text></text>
|
||||
<text class="icon-nav-text">消息</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<view class='user-bg' style='background-image:url(http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg)'>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<view class="list-li">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-list warning-text"> </view>
|
||||
默认
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-li list-arrow">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-right warning-text"> </view> 带箭头
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="" hover-class="none" class="list-li">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-medal primary-text"> </view> 带徽章
|
||||
</view>
|
||||
<view class="list-badge">
|
||||
<text class='badge warning-badge round'>徽章</text>
|
||||
<text class='badge secondary-badge radius '>徽章</text>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator url="" hover-class="none" class="list-li list-arrow">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-medal primary-text"> </view> 带图标的提示
|
||||
</view>
|
||||
<view class="list-icon iconfont icon-appreciatefill warning-text">
|
||||
点赞
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator url="" hover-class="none" class="list-li list-arrow">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-medal danger-text"> </view> 带说明
|
||||
</view>
|
||||
<view class="list-icon gray-text">
|
||||
小目标还没实现！
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class='list-box'>
|
||||
<view class="list-li">
|
||||
<view class='list-tx'>
|
||||
<view class='list-tx-img'>
|
||||
<image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg"></image>
|
||||
</view>
|
||||
<text> 名字</text>
|
||||
</view>
|
||||
<view class="delet-box iconfont icon-delete"></view>
|
||||
</view>
|
||||
<view class="list-li">
|
||||
<view class='list-tx'>
|
||||
<view class='list-tx-img'>
|
||||
<image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg"></image>
|
||||
</view>
|
||||
<text> 名字</text>
|
||||
</view>
|
||||
<view class="delet-box iconfont icon-delete"></view>
|
||||
</view>
|
||||
<view class="list-li">
|
||||
<view class='list-tx'>
|
||||
<view class='list-tx-img'>
|
||||
<image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg"></image>
|
||||
</view>
|
||||
<text> 名字</text>
|
||||
</view>
|
||||
<view class="delet-box iconfont icon-delete"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<view class="list-li">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-medal danger-text"> </view> 带信息
|
||||
<text>信息内容</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-li">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-medal danger-text"> </view> 带头像
|
||||
</view>
|
||||
<view class="list-tx">
|
||||
<view class='list-tx-img'>
|
||||
<image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" mode="aspectFill"></image>
|
||||
<image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" mode="aspectFill"></image>
|
||||
<image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" mode="aspectFill"></image>
|
||||
</view>
|
||||
<text>3 人</text>
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="" hover-class="none" class="list-li">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-medal primary-text"> </view> 带按钮
|
||||
</view>
|
||||
<view class="list-btn">
|
||||
<button class='primary btn'>
|
||||
<text class='iconfont icon-yinsi'></text> 按钮</button>
|
||||
<button class='danger btn'>按钮</button>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="list-box list-double-col">
|
||||
<view class="list-li">
|
||||
<view class="list-text">
|
||||
带信息
|
||||
<text>信息内容</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-li">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-medal danger-text"> </view> 双列
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="" hover-class="none" class="list-li">
|
||||
<view class="list-text success-text">
|
||||
消息
|
||||
</view>
|
||||
<view class="list-badge">
|
||||
<text class='badge mark-badge cur'></text>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator url="" hover-class="none" class="list-li">
|
||||
<view class='list-text warning-text'>访客</view>
|
||||
<view class="list-badge">
|
||||
<text class='badge mark-badge'>99+</text>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator url="" hover-class="none" class="list-li">
|
||||
<view class="list-text">
|
||||
没有图标
|
||||
</view>
|
||||
<view class="list-btn">
|
||||
<button class='danger btn'>按钮</button>
|
||||
</view>
|
||||
</navigator>
|
||||
<view class="list-li">
|
||||
</view>
|
||||
</view>
|
||||
<view class='list-box lattice-list'>
|
||||
<view class='lattice-li'>
|
||||
<view class="iconfont icon-countdown danger-text"> </view>
|
||||
<view class="lattice-text">
|
||||
宫格列表
|
||||
</view>
|
||||
</view>
|
||||
<view class='lattice-li'>
|
||||
<view class="iconfont icon-countdown danger-text"> </view>
|
||||
<view class="lattice-text">
|
||||
宫格列表
|
||||
</view>
|
||||
</view>
|
||||
<view class='lattice-li'>
|
||||
<view class="iconfont icon-countdown danger-text"> </view>
|
||||
<view class="lattice-text">
|
||||
宫格列表
|
||||
</view>
|
||||
</view>
|
||||
<view class='lattice-li'>
|
||||
<view class="iconfont icon-countdown danger-text"> </view>
|
||||
<view class="lattice-text">
|
||||
宫格列表
|
||||
</view>
|
||||
</view>
|
||||
<view class='lattice-li'>
|
||||
<view class="iconfont icon-countdown danger-text"> </view>
|
||||
<view class="lattice-text">
|
||||
宫格列表
|
||||
</view>
|
||||
</view>
|
||||
<view class='lattice-li'>
|
||||
<view class="iconfont icon-countdown danger-text"> </view>
|
||||
<view class="lattice-text">
|
||||
宫格列表
|
||||
</view>
|
||||
</view>
|
||||
<view class='lattice-li'>
|
||||
<view class="iconfont icon-countdown danger-text"> </view>
|
||||
<view class="lattice-text">
|
||||
宫格列表
|
||||
</view>
|
||||
</view>
|
||||
<view class='lattice-li'>
|
||||
<view class="iconfont icon-countdown danger-text"> </view>
|
||||
<view class="lattice-text">
|
||||
宫格列表
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='pv-sm text-center'>
|
||||
<button class='danger btn'>按钮</button>
|
||||
</view>
|
||||
3
pages/list/list.wxss
Normal file
3
pages/list/list.wxss
Normal file
@@ -0,0 +1,3 @@
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
26
pages/loading/loading.js
Normal file
26
pages/loading/loading.js
Normal file
@@ -0,0 +1,26 @@
|
||||
// pages/element/loading/loading.js
|
||||
Page({
|
||||
data: {
|
||||
loading: true
|
||||
},
|
||||
showLoading: function () {
|
||||
var that = this;
|
||||
this.setData({
|
||||
showLoading: true
|
||||
})
|
||||
|
||||
setTimeout(function () {
|
||||
that.setData({
|
||||
showLoading: false
|
||||
})
|
||||
}, 2000)
|
||||
},
|
||||
// onLoad: function () {
|
||||
// var that = this;
|
||||
// setTimeout(function () {
|
||||
// that.setData({
|
||||
// loading: true
|
||||
// })
|
||||
// }, 3000)
|
||||
// }
|
||||
})
|
||||
3
pages/loading/loading.json
Normal file
3
pages/loading/loading.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "加载/Loading"
|
||||
}
|
||||
49
pages/loading/loading.wxml
Normal file
49
pages/loading/loading.wxml
Normal file
@@ -0,0 +1,49 @@
|
||||
<view class="bar solid-bottom">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>底部-加载中</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loading-more {{loading?'cur':''}}">
|
||||
<view class='no-more'>
|
||||
<text class='iconfont icon-info'></text> 我也是有底线的！
|
||||
</view>
|
||||
<view class='loading-ing'>
|
||||
<text class='iconfont icon-loading iconfont-spin'></text> 加载中...
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>底部-加载完毕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="loading-more {{!loading?'cur':''}}">
|
||||
<view class='no-more'>
|
||||
<text class='iconfont icon-info'></text> 我也是有底线的！
|
||||
</view>
|
||||
<view class='loading-ing'>
|
||||
<text class='iconfont icon-loading iconfont-spin'></text> 加载中...
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>弹出框-加载</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='doc-main'>
|
||||
<view class='text-center'>
|
||||
<button class='warning btn' bindtap='showLoading'>点我</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class='mode-loading' wx:if="{{showLoading}}">
|
||||
<view class='mode-text'>
|
||||
<view class='iconfont icon-emojifill warning-text'></view>
|
||||
<view class='gray-text'>加载中...</view>
|
||||
</view>
|
||||
</view>
|
||||
10
pages/loading/loading.wxss
Normal file
10
pages/loading/loading.wxss
Normal file
@@ -0,0 +1,10 @@
|
||||
image{
|
||||
width: 100%;
|
||||
display:block;
|
||||
}
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.doc-main-title{
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
29
pages/modal/modal.js
Normal file
29
pages/modal/modal.js
Normal file
@@ -0,0 +1,29 @@
|
||||
var app =getApp()
|
||||
Page({
|
||||
|
||||
data: {
|
||||
items: [
|
||||
{ name: 'USA', value: '美国' },
|
||||
{ name: 'CHN', value: '中国', checked: 'true' },
|
||||
{ name: 'BRA', value: '巴西' },
|
||||
{ name: 'JPN', value: '日本' },
|
||||
{ name: 'ENG', value: '英国' },
|
||||
{ name: 'TUR', value: '法国' },
|
||||
{ name: 'BRA', value: '巴西' },
|
||||
{ name: 'JPN', value: '日本' },
|
||||
{ name: 'ENG', value: '英国' },
|
||||
{ name: 'TUR', value: '法国' }
|
||||
]
|
||||
},
|
||||
showModal: function (e) {
|
||||
var showName = e.currentTarget.dataset.modal;
|
||||
this.setData({
|
||||
modalName: showName
|
||||
})
|
||||
},
|
||||
closeModal: function (e) {
|
||||
this.setData({
|
||||
modalName: null
|
||||
})
|
||||
},
|
||||
})
|
||||
1
pages/modal/modal.json
Normal file
1
pages/modal/modal.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
99
pages/modal/modal.wxml
Normal file
99
pages/modal/modal.wxml
Normal file
@@ -0,0 +1,99 @@
|
||||
<view class="nav-list {{modalName=='defualtmodal'?'cur':''}}" bindtap='showModal' data-modal="defualtmodal">
|
||||
<view class="nav-title">普通弹出层</view>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
<view class="nav-list {{modalName=='bottomModal'?'cur':''}}" bindtap='showModal' data-modal="bottomModal">
|
||||
<view class="nav-title">底部弹出层</view>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="nav-list {{modalName=='modal'?'cur':''}}" bindtap='showModal' data-modal="modal">
|
||||
<view class="nav-title">两个操作的模态框</view>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="nav-list {{modalName=='modals'?'cur':''}}" bindtap='showModal' data-modal="modals">
|
||||
<view class="nav-title">多个操作的模态框</view>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="modal-box {{modalName=='defualtmodal'?'cur':''}}">
|
||||
<view class='modal-dialog'>
|
||||
<view class="modal-title">
|
||||
<text>复选框</text>
|
||||
<view class='bar-close badge danger round' bindtap='closeModal'>
|
||||
<text class='iconfont icon-close'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='modal-bd'>
|
||||
<radio-group class="list-double-col list-box" bindchange="radioChange">
|
||||
<label class="radio list-li" wx:for="{{items}}">
|
||||
<view class='list-text'>{{item.value}}</view>
|
||||
<radio value="{{item.name}}" checked="{{item.checked}}" class='list-icon' />
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="modal-box bottom-modal {{modalName=='bottomModal'?'cur':''}}">
|
||||
<view class='modal-dialog'>
|
||||
<view class="modal-title">
|
||||
<text>复选框</text>
|
||||
<view class='bar-close badge danger round' bindtap='closeModal'>
|
||||
<text class='iconfont icon-close'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='modal-bd'>
|
||||
<radio-group class="list-double-col list-box" bindchange="radioChange">
|
||||
<label class="list-li" wx:for="{{items}}">
|
||||
<view class='list-text'>{{item.value}}</view>
|
||||
<radio value="{{item.name}}" checked="{{item.checked}}" class='list-icon' />
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-box {{modalName=='modal'?'cur':''}}">
|
||||
<view class='modal-dialog'>
|
||||
<view class="modal-title">
|
||||
<text>复选框</text>
|
||||
<view class='bar-close badge danger round' bindtap='closeModal'>
|
||||
<text class='iconfont icon-close'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='modal-bd modal-message'>
|
||||
带确认和取消
|
||||
</view>
|
||||
<view class='modal-option'>
|
||||
<view class='modal-option-btn'>取消</view>
|
||||
<view class='modal-option-btn success-text'>确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-box {{modalName=='modals'?'cur':''}}">
|
||||
<view class='modal-dialog'>
|
||||
<view class="modal-title">
|
||||
<text>请选择</text>
|
||||
<view class='bar-close badge danger round' bindtap='closeModal'>
|
||||
<text class='iconfont icon-close'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='modal-bd modal-message'>
|
||||
带确认和取消
|
||||
</view>
|
||||
<view class='modal-option'>
|
||||
<view class='modal-option-btn success-text'>
|
||||
<text class='iconfont icon-moneybag'></text> 微信支付</view>
|
||||
<view class='modal-option-btn'>取消</view>
|
||||
<view class='modal-option-btn '>确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
3
pages/modal/modal.wxss
Normal file
3
pages/modal/modal.wxss
Normal file
@@ -0,0 +1,3 @@
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
24
pages/nav/nav.js
Normal file
24
pages/nav/nav.js
Normal file
@@ -0,0 +1,24 @@
|
||||
// pages/element/bar/bar.js
|
||||
Page({
|
||||
data: {
|
||||
nav: [
|
||||
{ title: '可滚动', name: 'norm' },
|
||||
{ title: '居中', name: 'center' },
|
||||
{ title: '深色', name: 'success' },
|
||||
{ title: '带菜单', name: 'menu' },
|
||||
{ title: '图标导航', name: 'icon' }
|
||||
],
|
||||
navName: 'norm'
|
||||
},
|
||||
navScroll: function (e) {
|
||||
var sl = e.detail.scrollLeft * 0.1;
|
||||
this.setData({
|
||||
scrollleft: sl
|
||||
})
|
||||
},
|
||||
setName: function (e) {
|
||||
this.setData({
|
||||
navName: e.currentTarget.dataset.name
|
||||
})
|
||||
}
|
||||
})
|
||||
3
pages/nav/nav.json
Normal file
3
pages/nav/nav.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "导航栏/Nav"
|
||||
}
|
||||
111
pages/nav/nav.wxml
Normal file
111
pages/nav/nav.wxml
Normal file
@@ -0,0 +1,111 @@
|
||||
<!--顶部导航-->
|
||||
<view class="nav" wx:if="{{navName=='norm'}}">
|
||||
<view class="nav-item-box">
|
||||
<view class="nav-item">全球</view>
|
||||
<view class="nav-item cur">中国</view>
|
||||
<view class="nav-item">美国</view>
|
||||
<view class="nav-item">巴西</view>
|
||||
<view class="nav-item">日本</view>
|
||||
<view class="nav-item">德国</view>
|
||||
<view class="nav-item">加拿大</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nav center-nav" wx:if="{{navName=='center'}}">
|
||||
<view class="nav-item-box">
|
||||
<view class="nav-item">
|
||||
<text class='iconfont icon-album'></text> 图集</view>
|
||||
<view class="nav-item cur">
|
||||
<text class='iconfont icon-video'></text> 视频</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nav center-nav success-nav" wx:if="{{navName=='success'}}">
|
||||
<view class="nav-item-box">
|
||||
<view class="nav-item">
|
||||
<text class='iconfont icon-album'></text> 图集</view>
|
||||
<view class="nav-item cur">
|
||||
<text class='iconfont icon-video'></text> 视频</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="nav menu-nav" wx:if="{{navName=='menu'}}">
|
||||
<view class="nav-item-box">
|
||||
<view class="nav-item">
|
||||
<text class='iconfont icon-hot'></text> 热销</view>
|
||||
<view class="nav-item cur">衣服</view>
|
||||
<view class="nav-item">裤子</view>
|
||||
<view class="nav-item">箱包</view>
|
||||
<view class="nav-item">手表</view>
|
||||
<view class="nav-item">珠宝</view>
|
||||
<view class="nav-item">数码</view>
|
||||
<view class="nav-item">家居</view>
|
||||
</view>
|
||||
<view class="menu-nav-btn">筛选
|
||||
<text class="iconfont icon-filter success-text"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-x="true" class="icon-nav-box" bindscroll="navScroll" wx:if="{{navName=='icon'}}">
|
||||
<view class="icon-nav">
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-picfill"></text>
|
||||
<text class="icon-nav-text">图集</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-cardboardfill"></text>
|
||||
<text class="icon-nav-text">VR</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-discoverfill"><text class='badge mark-badge cur'></text></text>
|
||||
<text class="icon-nav-text">发现</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-cartfill"><text class='badge mark-badge'>9</text></text>
|
||||
<text class="icon-nav-text">购物车</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-favorfill"></text>
|
||||
<text class="icon-nav-text">收藏</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-locationfill"></text>
|
||||
<text class="icon-nav-text">附近</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-weibo"><text class='badge mark-badge'>New</text></text>
|
||||
<text class="icon-nav-text">微博</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-selectionfill"></text>
|
||||
<text class="icon-nav-text">勋章</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-messagefill"><text class='badge mark-badge'>99+</text></text>
|
||||
<text class="icon-nav-text">消息</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-recordfill"></text>
|
||||
<text class="icon-nav-text">短视频</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-redpacket_fill"></text>
|
||||
<text class="icon-nav-text">红包</text>
|
||||
</navigator>
|
||||
<navigator class="icon-nav-navigator">
|
||||
<text class="iconfont icon-timefill"></text>
|
||||
<text class="icon-nav-text">历史记录</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="icon-bar-box" wx:if="{{navName=='icon'}}">
|
||||
<view class="icon-bar">
|
||||
<view class="icon-bar-dot" style='margin-left:{{scrollleft}}%'></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nav-list {{navName==item.name?'cur':''}}" wx:for="{{nav}}" wx:key="{{index}}" bindtap='setName' data-name='{{item.name}}'>
|
||||
<view class="nav-title">{{item.title}}</view>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
3
pages/nav/nav.wxss
Normal file
3
pages/nav/nav.wxss
Normal file
@@ -0,0 +1,3 @@
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
5
pages/norm/norm.js
Normal file
5
pages/norm/norm.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/element/norm/norm.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
3
pages/norm/norm.json
Normal file
3
pages/norm/norm.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "规范/Norm"
|
||||
}
|
||||
30
pages/norm/norm.wxml
Normal file
30
pages/norm/norm.wxml
Normal file
@@ -0,0 +1,30 @@
|
||||
<!--pages/element/norm/norm.wxml-->
|
||||
<view class="doc-main">
|
||||
<view class="doc-main-title">CSS 盒模型</view>
|
||||
<view class="doc-main-content">
|
||||
<text>Color UI将所有元素的盒模型 </text><view class="code">box-sizing</view><text> 设置为 </text><view class="code">border-box</view>
|
||||
<text> 这一属性，减少不必要的计算</text>
|
||||
</view>
|
||||
<view class="pre">view, text, scroll-view, swiper, button, form, input, textarea, label, navigator, image {
|
||||
box-sizing: border-box;
|
||||
}</view>
|
||||
<view class="doc-main-title">页面默认样式</view>
|
||||
<view class="doc-main-content">
|
||||
<text>页面 </text><view class="code">page</view><text> 有默认的设置参数 </text>
|
||||
</view>
|
||||
<view class="pre">page {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
|
||||
}</view>
|
||||
<view class="doc-main-title">尺寸单位</view>
|
||||
<view class="doc-main-content">
|
||||
<text>Color UI将继续使用小程序默认的单位 </text><view class="code">rpx</view>
|
||||
</view>
|
||||
<view class="doc-main-content">
|
||||
<text> rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
1
pages/norm/norm.wxss
Normal file
1
pages/norm/norm.wxss
Normal file
@@ -0,0 +1 @@
|
||||
/* pages/element/norm/norm.wxss */
|
||||
5
pages/progress/progress.js
Normal file
5
pages/progress/progress.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// pages/document/progress/progress.js
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
})
|
||||
1
pages/progress/progress.json
Normal file
1
pages/progress/progress.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
110
pages/progress/progress.wxml
Normal file
110
pages/progress/progress.wxml
Normal file
@@ -0,0 +1,110 @@
|
||||
<view class="bar solid-bottom">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>基本样式</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="progress mb-sm round">
|
||||
<view class="progress-bar " style="width: 30%"></view>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class="progress-bar" style="width: 40%">40%</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>进度条颜色</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="progress mb-sm">
|
||||
<view class="progress-bar" style="width: 15%"></view>
|
||||
</view>
|
||||
|
||||
<view class="progress mb-sm">
|
||||
<view class="progress-bar progress-bar-secondary" style="width: 30%"></view>
|
||||
</view>
|
||||
|
||||
<view class="progress mb-sm">
|
||||
<view class="progress-bar progress-bar-success" style="width: 45%"></view>
|
||||
</view>
|
||||
|
||||
<view class="progress mb-sm">
|
||||
<view class="progress-bar progress-bar-warning" style="width: 60%"></view>
|
||||
</view>
|
||||
|
||||
<view class="progress">
|
||||
<view class="progress-bar progress-bar-danger" style="width: 75%"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>进度条高度</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="progress progress-xs mb-sm">
|
||||
<view class="progress-bar" style="width: 80%"></view>
|
||||
</view>
|
||||
|
||||
<view class="progress progress-sm mb-sm">
|
||||
<view class="progress-bar" style="width: 60%"></view>
|
||||
</view>
|
||||
|
||||
<view class="progress">
|
||||
<view class="progress-bar" style="width: 40%"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>进度条条纹</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="progress mt-sm progress-striped">
|
||||
<view class="progress-bar progress-bar-danger" style="width: 80%"></view>
|
||||
</view>
|
||||
<view class="progress mt-sm progress-striped">
|
||||
<view class="progress-bar progress-bar-warning" style="width: 60%"></view>
|
||||
</view>
|
||||
<view class="progress mt-sm progress-striped">
|
||||
<view class="progress-bar progress-bar-success" style="width: 45%"></view>
|
||||
</view>
|
||||
<view class="progress mt-sm progress-striped">
|
||||
<view class="progress-bar progress-bar-secondary" style="width: 30%"></view>
|
||||
</view>
|
||||
<view class="progress mt-sm progress-striped">
|
||||
<view class="progress-bar" style="width: 15%"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>进度条动画</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="progress progress-striped progress-sm active ">
|
||||
<view class="progress-bar progress-bar-secondary" style="width: 57%"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bar solid-bottom mt-sm">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>进度条动画</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doc-main">
|
||||
<view class="progress">
|
||||
<view class="progress-bar" style="width: 65%">Male</view>
|
||||
<view class="progress-bar progress-bar-success" style="width: 15%">Female</view>
|
||||
<view class="progress-bar progress-bar-warning" style="width: 20%">Other</view>
|
||||
</view>
|
||||
</view>
|
||||
3
pages/progress/progress.wxss
Normal file
3
pages/progress/progress.wxss
Normal file
@@ -0,0 +1,3 @@
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
29
pages/rating/rating.js
Normal file
29
pages/rating/rating.js
Normal file
@@ -0,0 +1,29 @@
|
||||
|
||||
Page({
|
||||
data: {
|
||||
rating: [{
|
||||
id: 0,
|
||||
title: '描述相符',
|
||||
scores: 0,
|
||||
}, {
|
||||
id: 1,
|
||||
title: '物流服务',
|
||||
scores: 0,
|
||||
}, {
|
||||
id: 2,
|
||||
title: '服务态度',
|
||||
scores: 0,
|
||||
}]
|
||||
},
|
||||
onLoad: function (options) {
|
||||
|
||||
},
|
||||
setScores: function (e) {
|
||||
var id = e.currentTarget.dataset.id;
|
||||
var index = e.currentTarget.dataset.index;
|
||||
this.data.rating[id].scores = index;
|
||||
this.setData({
|
||||
rating: this.data.rating
|
||||
})
|
||||
}
|
||||
})
|
||||
1
pages/rating/rating.json
Normal file
1
pages/rating/rating.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
21
pages/rating/rating.wxml
Normal file
21
pages/rating/rating.wxml
Normal file
@@ -0,0 +1,21 @@
|
||||
<view class="bar solid-bottom">
|
||||
<view class='ml-sm'>
|
||||
<text class='iconfont icon-titles success-text'></text>
|
||||
<text class='text-lg ml-xs'>星级评分</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='doc-main'>
|
||||
<view class='rating-item' wx:for="{{rating}}" wx:for-item="rat">
|
||||
<view class='rating-title'>{{rat.title}}</view>
|
||||
<view class='rating-star'>
|
||||
<text wx:for="{{5}}" class="iconfont {{index<rat.scores?'icon-favorfill warning-text':'icon-favor gray-text'}}" bindtap='setScores' data-id='{{rat.id}}' data-index='{{index+1}}'></text>
|
||||
</view>
|
||||
<view class='rating-text gray-text'>
|
||||
<text wx:if="{{rat.scores==5}}">非常好</text>
|
||||
<text wx:if="{{rat.scores==4}}">好</text>
|
||||
<text wx:if="{{rat.scores==3}}">一般</text>
|
||||
<text wx:if="{{rat.scores==2}}">差</text>
|
||||
<text wx:if="{{rat.scores==1}}">非常差</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
14
pages/rating/rating.wxss
Normal file
14
pages/rating/rating.wxss
Normal file
@@ -0,0 +1,14 @@
|
||||
page{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.rating-item{
|
||||
display: flex;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
.rating-title,.rating-star {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.rating-star text{
|
||||
padding: 0 10rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
28
pages/side/side.js
Normal file
28
pages/side/side.js
Normal file
@@ -0,0 +1,28 @@
|
||||
Page({
|
||||
data: {
|
||||
radio: [
|
||||
{ name: 'USA', value: '美国' },
|
||||
{ name: 'CHN', value: '中国', checked: 'true' },
|
||||
{ name: 'BRA', value: '巴西' },
|
||||
{ name: 'JPN', value: '日本' },
|
||||
{ name: 'ENG', value: '澳大利亚' },
|
||||
{ name: 'TUR', value: '哈萨克斯坦' },
|
||||
{ name: 'TUR', value: '法国' },
|
||||
{ name: 'BRA', value: '巴西' },
|
||||
{ name: 'JPN', value: '日本' },
|
||||
{ name: 'ENG', value: '英国' },
|
||||
{ name: 'TUR', value: '法国' }
|
||||
],
|
||||
},
|
||||
showModal: function (e) {
|
||||
var showName = e.currentTarget.dataset.modal;
|
||||
this.setData({
|
||||
modalName: showName
|
||||
})
|
||||
},
|
||||
closeModal: function (e) {
|
||||
this.setData({
|
||||
modalName: null
|
||||
})
|
||||
}
|
||||
})
|
||||
1
pages/side/side.json
Normal file
1
pages/side/side.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
80
pages/side/side.wxml
Normal file
80
pages/side/side.wxml
Normal file
@@ -0,0 +1,80 @@
|
||||
<view class="bar justify-between">
|
||||
<view class='ml-sm' bindtap='showModal' data-modal='listSide'>
|
||||
<view class='btn success sm radius'>
|
||||
<text class='iconfont icon-list'> 侧边菜单</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='mr-sm' bindtap='showModal' data-modal='menuSide'>筛选
|
||||
<text class="iconfont icon-filter success-text"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='side side-right' wx:if="{{modalName=='menuSide'}}">
|
||||
<view class='side-close' bindtap='closeModal'></view>
|
||||
<view class="bar">
|
||||
<view class='text-lg'>
|
||||
<text class=' iconfont icon-title success-text ml-sm'></text> 城市
|
||||
</view>
|
||||
</view>
|
||||
<view class='double-chose'>
|
||||
<scroll-view scroll-y class="double-chose-first" style='height:240px;width: 400rpx;'>
|
||||
<view class="cur">北京</view>
|
||||
<view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-y class="double-chose-last" style='height:240px;'>
|
||||
<view class="cur">北京</view>
|
||||
<view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="bar mt-sm">
|
||||
<view class='text-lg'>
|
||||
<text class=' iconfont icon-title success-text ml-sm'></text> 国家
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class='modal-bd' scroll-y="true" style='max-height:800rpx;'>
|
||||
<view class='single-modal'>
|
||||
<view class="single-modal-item {{item.checked?'cur':''}}" wx:for="{{radio}}">{{item.value}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class='flex justify-center bar'>
|
||||
<button class='success btn hollow mr-sm'>重置</button>
|
||||
<button class='warning btn' bindtap='closeModal'>确定</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='side side-list' wx:if="{{modalName=='listSide'}}">
|
||||
<view class="user">
|
||||
<view class="user-top">
|
||||
<view class="user-img">
|
||||
<image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" class='radius'></image>
|
||||
</view>
|
||||
<view class="user-text">
|
||||
<view class="user-name">
|
||||
文晓港
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='user-bg' style='background-image:url(http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg)'>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<view class="list-li list-arrow">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-moneybagfill danger-text"> </view> 余额
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-li list-arrow">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-skinfill success-text"> </view> 主题
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-li list-arrow">
|
||||
<view class="list-text">
|
||||
<view class="iconfont icon-locationfill warning-text"> </view> 地址
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='flex justify-center bar mt-xs'>
|
||||
<button class='warning btn hollow' bindtap='closeModal'>退出账号</button>
|
||||
</view>
|
||||
<view class='side-close' bindtap='closeModal'></view>
|
||||
</view>
|
||||
38
pages/side/side.wxss
Normal file
38
pages/side/side.wxss
Normal file
@@ -0,0 +1,38 @@
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.side {
|
||||
background: #f1f1f1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 650rpx;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.side-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.side-list {
|
||||
width: 400rpx;
|
||||
}
|
||||
|
||||
.side-close {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
width: 350rpx;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 997;
|
||||
right: 0rpx;
|
||||
top: 0rpx;
|
||||
}
|
||||
.side-right .side-close{
|
||||
width: 100rpx;
|
||||
left: 0rpx;
|
||||
right: auto;
|
||||
}
|
||||
41
pages/slider/slider.js
Normal file
41
pages/slider/slider.js
Normal file
@@ -0,0 +1,41 @@
|
||||
// pages/document/slider/slider.js
|
||||
Page({
|
||||
data: {
|
||||
scrollInto: 0,
|
||||
scrollList: [
|
||||
{ id: '1' },
|
||||
{ id: '2' },
|
||||
{ id: '3' },
|
||||
{ id: '1' },
|
||||
{ id: '2' },
|
||||
{ id: '3' },
|
||||
{ id: '4' },
|
||||
{ id: '1' },
|
||||
{ id: '2' }]
|
||||
},
|
||||
scrollLeft: function (e) {
|
||||
var into = this.data.scrollInto;
|
||||
var length = this.data.scrollList.length;
|
||||
if (into > 0) {
|
||||
this.setData({
|
||||
scrollInto: into - 1,
|
||||
})
|
||||
} else {
|
||||
this.setData({
|
||||
scrollInto: length - 3,
|
||||
})
|
||||
}
|
||||
},
|
||||
scrollRight: function (e) {
|
||||
var into = this.data.scrollInto;
|
||||
if (into < this.data.scrollList.length - 3) {
|
||||
this.setData({
|
||||
scrollInto: into + 1,
|
||||
})
|
||||
} else {
|
||||
this.setData({
|
||||
scrollInto: 0,
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
1
pages/slider/slider.json
Normal file
1
pages/slider/slider.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
36
pages/slider/slider.wxml
Normal file
36
pages/slider/slider.wxml
Normal file
@@ -0,0 +1,36 @@
|
||||
<view class="bar">
|
||||
<view class='ml-sm iconfont icon-titles success-text'>全屏限高轮播</view>
|
||||
</view>
|
||||
<swiper class='swiper-screen' indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" indicator-active-color="#ff6600">
|
||||
<swiper-item wx:for="1234">
|
||||
<image src="http://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill' />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="bar mt-sm">
|
||||
<view class='ml-sm iconfont icon-titles success-text'>带背景图轮播</view>
|
||||
</view>
|
||||
<swiper class='swiper-bg' indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" indicator-active-color="#ff6600">
|
||||
<swiper-item wx:for="124">
|
||||
<view class='shadow-alice'>
|
||||
<image src="http://image.weilanwl.com/img/4x3-{{index+2}}.jpg" mode='aspectFill' />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="bar mt-sm">
|
||||
<view class='ml-sm iconfont icon-titles success-text'>多图轮播(scroll-view)</view>
|
||||
</view>
|
||||
<view class='scroll-bar'>
|
||||
<view class='scroll-left' bindtap='scrollLeft'>
|
||||
<text class='iconfont icon-back'></text>
|
||||
</view>
|
||||
<scroll-view scroll-x class='scroll-list-box' scroll-into-view="in-{{scrollInto}}" scroll-with-animation>
|
||||
<view class='scroll-list'>
|
||||
<view class='scroll-item' id="in-{{index}}" style='background-image:url(http://image.weilanwl.com/img/4x3-{{item.id}}.jpg)' wx:for="{{scrollList}}"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class='scroll-right' bindtap='scrollRight'>
|
||||
<text class='iconfont icon-right'></text>
|
||||
</view>
|
||||
</view>
|
||||
69
pages/slider/slider.wxss
Normal file
69
pages/slider/slider.wxss
Normal file
@@ -0,0 +1,69 @@
|
||||
page {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.swiper-screen {
|
||||
height: 460rpx;
|
||||
}
|
||||
|
||||
.swiper-screen image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 460rpx;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.swiper-bg {
|
||||
background-image: url(http://image.weilanwl.com/img/swiper-bg.png);
|
||||
background-size: cover;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.swiper-bg swiper-item {
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.swiper-bg swiper-item view {
|
||||
margin: 40rpx;
|
||||
}
|
||||
|
||||
.swiper-bg image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 400rpx;
|
||||
margin: 0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.scroll-bar {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.scroll-left, .scroll-right {
|
||||
width: 75rpx;
|
||||
text-align: center;
|
||||
line-height: 150rpx;
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.scroll-list-box {
|
||||
height: 150rpx;
|
||||
width: 600rpx;
|
||||
}
|
||||
|
||||
.scroll-list {
|
||||
height: 150rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
height: 150rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 170rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user