微信小程序picker-view嵌入式滚动选择器组件

微信小程序picker-view嵌入式滚动选择器组件

picker-view组件与picker组件一样都是滚动选择器，不同的地方在于picker-view组件可以嵌套在页面中使用，而picker组件只能从底部弹出，选择完成后消失。

picker-view组件的定制化更高，使用起来也更麻烦一些，因为picker-view没有mode参数，所有数据都需要手动添加上去。通常与picker-view-column一起使用，picker-view-column放在picker-view内部，用来表示一组数据。

picker-view嵌入式滚动选择器组件示例如下：

<!--index.wxml-->
<view>picker-view选择器：</view>
<view>
  <!-- 结果展示 -->
  <view>{{year}}年{{month}}月{{day}}日</view>
  <!-- picker-view组件 -->
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;"
  value="{{value}}" bindchange="bindChange">
  <!-- 年选择 -->
  <picker-view-column>
  <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
  </picker-view-column>
  <!-- 月选择 -->
  <picker-view-column>
  <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
  </picker-view-column>
  <!-- 日选择 -->
  <picker-view-column>
  <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
  </picker-view-column>
  </picker-view>
</view>
// index.js
const date = new Date()// 获取当前时间
const years = [];// 定义年数组
const months = [];// 定义月数组
const days = [];// 定义日数组
// 设置年份数据，从1990年到现在
for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}
// 设置月份数据
for (let i = 1; i <= 12; i++) {
  months.push(i)
}
// 设置日份数据
for (let i = 1; i <= 31; i++) {
  days.push(i)
}
Page({
  data: {
        years: years,
        year: date.getFullYear(),
        months: months,
        month: 2,
        days: days,
        day: 2,
        value: [9999, 1, 1],
  },
  bindChange: function (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]]
    })
  }
})

picker-view嵌入式滚动选择器组件示例如图所示：

picker-view属性如表所示：

酷客网相关文章：

• 微信小程序picker滚动选择器组件
• 微信小程序textarea多行输入框组件
• 微信小程序input输入框组件
• 微信小程序label扩展组件