init
This commit is contained in:
0
xhs-mini-demos/component-case/picker/picker.css
Normal file
0
xhs-mini-demos/component-case/picker/picker.css
Normal file
204
xhs-mini-demos/component-case/picker/picker.js
Normal file
204
xhs-mini-demos/component-case/picker/picker.js
Normal file
@@ -0,0 +1,204 @@
|
||||
Page({
|
||||
data: {
|
||||
disabled: false,
|
||||
headerText: 'test',
|
||||
cancelTime: 'xxx',
|
||||
array: ['美国', '中国', '巴西', '日本'],
|
||||
arrayObject: [{ name: '美国' }, { name: '中国' }, { name: '巴西' }, { name: '日本' }],
|
||||
objectArray: [
|
||||
{
|
||||
id: 0,
|
||||
name: '美国',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '中国',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '巴西',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '日本',
|
||||
},
|
||||
],
|
||||
index: 1,
|
||||
multiArray: [
|
||||
['无脊柱动物', '脊柱动物'],
|
||||
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
|
||||
['猪肉绦虫', '吸血虫'],
|
||||
],
|
||||
objectMultiArray: [
|
||||
[
|
||||
{
|
||||
id: 0,
|
||||
name: '无脊柱动物',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '脊柱动物',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
id: 0,
|
||||
name: '扁性动物',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '线形动物',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '环节动物',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '软体动物',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '节肢动物',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
id: 0,
|
||||
name: '猪肉绦虫',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '吸血虫',
|
||||
},
|
||||
],
|
||||
],
|
||||
multiIndex: [1, 0, 1],
|
||||
date: '2016-09-01',
|
||||
month: '2016-09',
|
||||
year: '2016',
|
||||
time: '12:01',
|
||||
region: ['广东省', '广州市', '海珠区'],
|
||||
customItem: '全部',
|
||||
},
|
||||
bindPickerChange(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value);
|
||||
this.setData({
|
||||
index: e.detail.value,
|
||||
});
|
||||
},
|
||||
bindMultiPickerChange(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value);
|
||||
this.setData({
|
||||
multiIndex: e.detail.value,
|
||||
});
|
||||
},
|
||||
bindMultiPickerColumnChange(e) {
|
||||
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
|
||||
const 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(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value);
|
||||
this.setData({
|
||||
date: e.detail.value,
|
||||
});
|
||||
},
|
||||
bindMonthChange(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value);
|
||||
this.setData({
|
||||
month: e.detail.value,
|
||||
});
|
||||
},
|
||||
bindYearChange(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value);
|
||||
this.setData({
|
||||
year: e.detail.value,
|
||||
});
|
||||
},
|
||||
bindTimeChange(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value);
|
||||
this.setData({
|
||||
time: e.detail.value,
|
||||
});
|
||||
},
|
||||
bindRegionChange(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value);
|
||||
this.setData({
|
||||
region: e.detail.value,
|
||||
});
|
||||
},
|
||||
changeDisabled() {
|
||||
this.setData({
|
||||
disabled: !this.data.disabled,
|
||||
});
|
||||
},
|
||||
changeHeaderText({ detail }) {
|
||||
this.setData({
|
||||
headerText: detail.value,
|
||||
});
|
||||
},
|
||||
onCacnel({ timeStamp }) {
|
||||
this.setData({
|
||||
cancelTime: timeStamp,
|
||||
});
|
||||
},
|
||||
});
|
||||
7
xhs-mini-demos/component-case/picker/picker.json
Normal file
7
xhs-mini-demos/component-case/picker/picker.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "底部滚动选择器",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index"
|
||||
}
|
||||
}
|
||||
81
xhs-mini-demos/component-case/picker/picker.xhsml
Normal file
81
xhs-mini-demos/component-case/picker/picker.xhsml
Normal file
@@ -0,0 +1,81 @@
|
||||
<view class="container">
|
||||
<showbox title="普通选择器">
|
||||
<box>
|
||||
<view class="picker-container">
|
||||
<view class="_ui-input">
|
||||
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" disabled="{{disabled}}" header-text="{{headerText}}" bindcancel="onCacnel">
|
||||
<view>当前选择：{{array[index]}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="多列选择器">
|
||||
<box>
|
||||
<view class="picker-container">
|
||||
<view class="_ui-input">
|
||||
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" bindcancel="onCacnel">
|
||||
<view class="picker">当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="时间选择器">
|
||||
<box>
|
||||
<view class="picker-container">
|
||||
<view class="_ui-input">
|
||||
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange" bindcancel="onCacnel">
|
||||
<view class="picker">当前时间: {{time}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
|
||||
<showbox title="日期选择器">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<view>
|
||||
<view class="_ui-input">
|
||||
<picker mode="date" fields="day" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" bindcancel="onCacnel">
|
||||
<view>当前选择日期: {{date}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="_ui-input">
|
||||
<picker mode="date" fields="month" value="{{month}}" start="2015-09" end="2017-09" bindchange="bindMonthChange" bindcancel="onCacnel">
|
||||
<view>当前选择日期: {{month}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view>
|
||||
<view class="_ui-input">
|
||||
<picker mode="date" fields="year" value="{{year}}" start="2015" end="2017" bindchange="bindYearChange" bindcancel="onCacnel">
|
||||
<view>当前选择日期: {{year}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="省市区选择器">
|
||||
<box>
|
||||
<view class="picker-container">
|
||||
<view class="_ui-input">
|
||||
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}" bindcancel="onCacnel">
|
||||
<view>当前选择省区：{{region[0]}}/{{region[1]}}/{{region[2]}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
Reference in New Issue
Block a user