sannilake
/
miniprogram-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加 radio slider 页面

master
XuPeng 2020-12-08 13:45:21 +08:00
parent 0c84d52e5a
commit 92402d73b2
9 changed files with 182 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.json
View File

@ -14,7 +14,9 @@
"pages/component/navigator/redirect",
"pages/component/button/button",
"pages/component/checkbox/checkbox",
"pages/component/label/label"
"pages/component/label/label",
"pages/component/radio/radio",
"pages/component/slider/slider"
],
"window": {
"backgroundTextStyle": "light",

32
pages/component/radio/radio.js 100644
View File

@ -0,0 +1,32 @@
Page({
onShareAppMessage() {
return {
title: 'radio',
path: 'pages/component/radio/radio'
}
},
data: {
items: [
{value: 'USA', name: '美国'},
{value: 'CHN', name: '中国', checked: 'true'},
{value: 'BRA', name: '巴西'},
{value: 'JPN', name: '日本'},
{value: 'ENG', name: '英国'},
{value: 'FRA', name: '法国'},
]
},
radioChange(e) {
console.log('radio发生change事件，携带value值为：', e.detail.value)
const items = this.data.items
for (let i = 0, len = items.length; i < len; ++i) {
items[i].checked = items[i].value === e.detail.value
}
this.setData({
items
})
}
})

3
pages/component/radio/radio.json 100644
View File

@ -0,0 +1,3 @@
{
"navigationBarTitleText": "radio"
}

49
pages/component/radio/radio.wxml 100644
View File

@ -0,0 +1,49 @@
<import src="../../common/head.wxml" />
<import src="../../common/foot.wxml" />
<view class="container">
<template is="head" data="{{title: 'radio'}}"/>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">默认样式</view>
<label class="radio">
<radio value="r1" checked="true"/>选中
</label>
<label class="radio">
<radio value="r2" />未选中
</label>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">禁用</view>
<label class="radio">
<radio disabled />
</label>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">设置颜色</view>
<label class="radio">
<radio color="#409eff" />颜色
</label>
</view>
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="weui-cells weui-cells_after-title">
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
<view class="weui-cell__hd">
<radio value="{{item.value}}" checked="true"/>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</radio-group>
</view>
</view>
</view>
<template is="foot" />
</view>

5
pages/component/radio/radio.wxss 100644
View File

@ -0,0 +1,5 @@
@import "../../common/lib/weui.wxss";
.radio {
margin-right: 10px;
}

18
pages/component/slider/slider.js 100644
View File

@ -0,0 +1,18 @@
const pageData = {
onShareAppMessage() {
return {
title: 'slider',
path: 'pages/component/slider/slider'
}
},
}
for (let i = 1; i < 5; ++i) {
(function (index) {
pageData['slider' + index + 'change'] = function (e) {
console.log('slider' + index + '发生change事件，携带值为', e.detail.value)
}
}(i))
}
Page(pageData)

3
pages/component/slider/slider.json 100644
View File

@ -0,0 +1,3 @@
{
"navigationBarTitleText": "slider"
}

66
pages/component/slider/slider.wxml 100644
View File

@ -0,0 +1,66 @@
<import src="../../common/head.wxml" />
<import src="../../common/foot.wxml" />
<view class="container">
<template is="head" data="{{title: 'slider'}}"/>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">设置step</view>
<view class="body-view">
<slider value="60" bindchange="slider2change" step="5"/>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">显示当前value</view>
<view class="body-view">
<slider value="50" bindchange="slider3change" show-value/>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">设置最小/最大值</view>
<view class="body-view">
<slider value="100" bindchange="slider4change" min="50" max="200" show-value/>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">禁用</view>
<view class="body-view">
<slider value="60" disabled />
</view>
</view>
<!-- <view class="page-section page-section-gap">
<view class="page-section-title">已选择的颜色</view>
<view class="body-view">
<slider value="60" activeColor="#409eff" />
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">背景条的颜色</view>
<view class="body-view">
<slider value="60" backgroundColor="#409eff" />
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">滑块的大小，取值范围为 12 - 28</view>
<view class="body-view">
<slider value="60" block-size="12" />
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">滑块的颜色</view>
<view class="body-view">
<slider value="60" block-color="#409eff" />
</view>
</view> -->
</view>
<template is="foot" />
</view>

3
pages/component/slider/slider.wxss 100644
View File

@ -0,0 +1,3 @@
slider {
margin: 0;
}