微信小程序weui在线入门教程-WeUi操作反馈-picker选择器

逃离我推掉我的手 2024-02-19 15:50 58阅读 0赞

### 单列选择器 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
![微信小程序weui在线入门教程-WeUi操作反馈-picker选择器][weui_-WeUi_-picker]  
时间选择器  
![微信小程序weui在线入门教程-WeUi操作反馈-picker选择器][weui_-WeUi_-picker 1]  
日期选择器  
![微信小程序weui在线入门教程-WeUi操作反馈-picker选择器][weui_-WeUi_-picker 2]

> js代码

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
    
        })
    
      },

> 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]![微信小程序weui在线入门教程-WeUi操作反馈-picker选择器][weui_-WeUi_-picker 3]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[weui_-WeUi_-picker]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e9fb4cad62974a0f8956457e8781729a.png
[weui_-WeUi_-picker 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e640f2e69cbe412ca2ab42d2c2f31b82.png
[weui_-WeUi_-picker 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cc63dce64f974ef28ae6ba9c6e499ae3.png
[-WeUI]: https://ke.qq.com/course/348627?tuin=2b10d56
[weui_-WeUi_-picker 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d0d338d0a35d4cc1b0ad662def4f6ede.png