WeChat applet - implementation of drop-down list
WeChat applet currently provides two ways to implement drop-down lists: action-sheet and picker selector
action-sheet
There are two ways to implement the drop-down in action-sheet, the first is to use the action-sheet label, and the second is to use the wx.showActionSheet method
(1) action-sheet label
<action-sheet bindchange="actionSheetChange" hidden="{{actionType}}">
<block wx:for="{{actionSheetItems}}" wx:key="*this">
<action-sheet-item class="item" bindtap="bindItemTap" data-name="{{item}}">
{{item}}
</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
<view>
<input type="text" name="type" value="{{addTypeData}}" disabled="{{addTypeDis}}"
bindfocus="addType" placeholder="Please enter your city" style="border:1px solid black;margin:15px;"/>
</view>
Page({
data:{
actionSheetItems : ['Beijing','Shanghai','Zhengzhou','Nanjing','Chengdu','Qingdao','Shijiazhuang'],
addTypeDis : false,
actionType : true,
addTypeData : ""
},
addType : function(event){
this.setData({
addTypeDis : true,
actionType :false,
typeClass : " "
})
},
bindItemTap: function (e) {
this.setData({
addTypeDis : false,
actionType :true,
addTypeData :e.currentTarget.dataset.name,
})
},
actionSheetChange: function(e) {
this.setData({
addTypeDis : false,
actionType : true,
})
}
})
Note: The maximum length of the actionSheetItems array is 6, and more than 6 will not be displayed.
The effect is as shown in the figure:
（2）wx.showActionSheet(Object)
<input disabled="{{addLevelDis}}" type="text" bindfocus="addLevel" value="{{addLevelData}}"
style="border:1px solid black;margin:20px;" placeholder="Please enter user level"/>
Page({
data:{
actionSheetLevelItems : ['A','B','C','S'],
addLevelData: "",
addLevelDis: false
},
addLevel : function(event) {
this.setData({
addLevelDis: true
})
var that = this
wx.showActionSheet ({{
itemList: that.data.actionSheetLevelItems,
success: function(res) {
if (!res.cancel) {
that.setData({
addLevelData: that.data.actionSheetLevelItems [res.tapIndex]
})
}
that.setData({
addLevelDis: false
})
}
})
}
})
The effect is as shown in the figure:
picker selector
| Scroll selector, now supports three selectors, which are distinguished by mode, namely ordinary selector, time selector, date selector, and the default is ordinary selector. (1) Ordinary selector: mode = selector (2) Time selector: mode = time (3) Date picker: mode = date |
<view style="border:1px solid black; margin: 15px;">
<view class="section" style="margin:20px;">
<picker mode="selector" bindchange="bindPickerChange" value="{{arrayIndex}}" range="{{array}}" name="area">
<view class="picker">
Region: {{array[arrayIndex]}}
</view>
</picker>
</view>
<view class="section" style="margin:20px;">
<picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange" name="time">
<view class="picker">
时间：{{time}}
</view>
</picker>
</view>
<view class="section" style="margin:20px;">
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" name="date">
<view class="picker">
日期：{{date}}
</view>
</picker>
</view>
</view>
Page({
data:{
array: ['中国', '美国', '巴西', '日本'],
arrayIndex: 0,
date: '2016-09-01',
time: '09:00'
},
bindPickerChange: function(e) {
this.setData({
arrayIndex: e.detail.value
})
},
bindDateChange: function(e) {
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
this.setData({
time: e.detail.value
})
}
})
效果如图：
