微信小程序组件：picker类组件 picker,picker-view,picker-view-column

Posted 2023-03-30 tangab

picker

picker就是类似上图的滑动选择 

picker | 微信开放文档

常用属性 mode, range, bindchange

<picker mode="time" range="array" start="06:30" end="18:30" bindchange="bindTimeChange">
    <view class="picker">
      当前选择:time
    </view>
  </picker>

 需要注意的是picker中的显示最好用一个<view>显示在那里，picker本身不提供显示选项和显示更改后的选项，它作为一个组件只是提供弹出滑动多选项的功能！

JS文件

  data: 
    time:'12:01',  
  ,
  bindTimeChange: function(e) 
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData(
      time: e.detail.value
    )
  ,

显示更改后的数据，一般用bindchange关联一个更改函数

更改效果由JS文件里重新设置time数据，因为time要更改，所以用time来取值.

picker-view，picker-view-column

picker-view是一个大组件，如上图所示，中间嵌套的每一列为picker-view-column

<view class="container">
  <view class="page-body">
    <view class="selected-date">year年month月day日isDaytime ? "白天" : "夜晚"</view>
    <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="value" bindchange="bindChange">
      <picker-view-column>
        <view wx:for="years" wx:key="years" style="line-height: 50px; text-align: center;">item年</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="months" wx:key="months" style="line-height: 50px; text-align: center;">item月</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="days" wx:key="days" style="line-height: 50px; text-align: center;">item日</view>
      </picker-view-column>
      <picker-view-column>
        <view class="icon-container">
          <image class="picker-icon" src="../lib/daytime.png" />
        </view>
        <view class="icon-container">
          <image class="picker-icon" src="../lib/night.png" />
        </view>
      </picker-view-column>
    </picker-view>
  </view>

</view>

其中picker-view由style属性，可以设置字体和滑动口的样式,也是bandchange修改，一次修改多个

bindChange(e) 
    const val = e.detail.value
    this.setData(
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]],
      isDaytime: !val[3]
    )