微信小程序的表單組件picker-view怎么用

這篇文章主要介紹“微信小程序的表單組件picker-view怎么用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序的表單組件picker-view怎么用”文章能幫助大家解決問題。

picker-view

嵌入頁面的滾動選擇器

注意：其中只可放置<picker-view-column/>組件，其他節點不會顯示。

picker-view-column

僅可放置于<picker-view />中，其孩子節點的高度會自動設置成與picker-view的選中框的高度一致。

示例代碼：

<view>
  <view>{{year}}年{{month}}月{{day}}日</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>

const date = new Date()const years = []const months = []const days = []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,
    year: date.getFullYear(),
    value: [9999, 1, 1],
  },
  bindChange: function(e) {const val = e.detail.valuethis.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

關于“微信小程序的表單組件picker-view怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。