--------今天休息跟大家分享一下在开发小程序遇到的时间选择这块的代码;当前时间的格式为:月+日+点+分+点+分 --------代码复制即可用,也可以直接下载git上的demo运行就可以了~git地址:https://github.com/hjqit/Wechat-demo-picker --------Emmmm、代码易懂,有需要的小伙伴看看就知道了;
图1:设计图 图2:demo效果图
上代码中…
.wxml文件
<view> <view>{{month}}月{{day}}日{{hour}}点:{{minute}}分~{{hours_}}点:{{minutes_}}分</view> <view style="border:1px solid red;position: fixed;width: 100%;bottom: 0;"> <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;text-align: center;" value="{{value}}" bindchange="bindChange"> <picker-view-column style="display:none;"> <view wx:for="{{years}}" wx:key style="line-height: 50px;display:none;">{{item}}年</view> </picker-view-column> <picker-view-column> <view wx:for="{{months}}" wx:key style="line-height: 50px">{{item}}月</view> </picker-view-column> <picker-view-column> <view wx:for="{{days}}" wx:key style="line-height: 50px">{{item}}日</view> </picker-view-column> <picker-view-column> <view wx:for="{{hours}}" wx:key style="line-height: 50px">{{item}}点</view> </picker-view-column> <picker-view-column> <view style="line-height: 50px;text-align: center;">:</view> </picker-view-column> <picker-view-column> <view wx:for="{{minutes}}" wx:key style="line-height: 50px">{{item}}分</view> </picker-view-column> <picker-view-column> <view style="line-height: 50px;text-align: center;">~</view> </picker-view-column> <picker-view-column> <view wx:for="{{hours_s}}" wx:key style="line-height: 50px">{{item}}点</view> </picker-view-column> <picker-view-column> <view style="line-height: 50px;text-align: center;">:</view> </picker-view-column> <picker-view-column> <view wx:for="{{minutes_s}}" wx:key style="line-height: 50px">{{item}}分</view> </picker-view-column> </picker-view> </view> </view>.wxss文件略
.js文件
const date = new Date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] const hours_s = [] const minutes_s = [] 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) } for (let i = 1; i <= 23; i++) { hours.push(i) // console.log(time.push(i)) } for (let i = 1; i <= 60; i++) { minutes.push(i) // console.log(minutes.push(i)) } for (let i = 1; i <= 23; i++) { hours_s.push(i) // console.log(minutes.push(i)) } for (let i = 1; i <= 60; i++) { minutes_s.push(i) // console.log(minutes.push(i)) } Page({ data: { years: years, year: date.getFullYear(), months: months, month: 2, days: days, day: 2, hours: hours, hour: 3, minutes: minutes, minute: 2, hours_s: hours_s, hours_: 7, minutes_s: minutes_s, minutes_: 9, value: [9999, 1, 1], }, bindChange: function (e) { // console.log(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]], hour: this.data.hours[val[3]], minute: this.data.minutes[val[5]], hours_: this.data.hours_s[val[7]], minutes_: this.data.minutes_s[val[9]], }) } })