1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序组件之picker-view

微信小程序组件之picker-view

时间:2020-08-29 08:13:40

相关推荐

微信小程序组件之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,

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]]

})

}

})

Tips

tip: 滚动时在iOS自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭

总结

value 里面的值为默认值;

案例中只有年月日,如果想参考年月日时分秒,请参考博客[/qq_37022150]

更多文章,请关注博客

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。