WEUI在微信小程序中的使用 |
项目框架的制作 |
栏目首页 |
weui基础组件 |
weui表单 |
weui 操作反馈相关 |
weui 导航 navbar 切换(类tab)使用教程 |
weui 搜索searchbar使用教程 |
当前阅读教程:小程序Weui在线教程 > weui Picker选择器 使用教程 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: weui 失败提示页 | 下一篇: weui Toast弹出式提示 使用教程 |
单列选择器 时间选择器 日期选择器 js代码 // pages/03caozuofankui/04-picker.js Page({ /** * 页面的初始数据 */ data: { array: ['美国', '中国', '巴西', '日本'], index: 0, date: '2016-09-01', time: '12:01' }, bindPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, bindDateChange: function (e) { this.setData({ date: e.detail.value }) }, bindTimeChange: function (e) { this.setData({ time: e.detail.value }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) wxml代码 <view class="page"> <view class="page__hd"> <view class="page__title">Picker</view> <view class="page__desc">选择器,这里使用小程序原生的picker。</view> </view> <view class="page__bd"> <view class="weui-btn-area"> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <button type="default">单列选择器</button> </picker> <picker class="weui-btn" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <button type="default">时间选择器</button> </picker> <picker class="weui-btn" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <button type="default">日期选择器</button> </picker> </view> </view> </view> |
|
上一篇: weui 失败提示页 | 下一篇: weui Toast弹出式提示 使用教程 |