您的位置:首页 > 移动开发 > 微信开发

微信小程序picker-view日期选择器

2016-12-23 11:29 597 查看
使用微信小程序设计下拉菜单,发现官方文档中关于picker-view的示例代码有错误,

顶部天数不随着滑动而变化,并且默认出现的月份和天数是写死的,不是根据当天日期显示。

修改后的js文件为

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,

        months: months,

        days: days,

        //默认的顶部日期

        year: date.getFullYear(),

        month: date.getMonth()+1,

        day: date.getDate(),

        //滑动框中放入的是第几个值

        value: [date.getFullYear(), date.getMonth(), date.getDate()-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]]

        })

    }

})

date.getMonth()取得的月份比真实月份小1,即从0到11月份,并且需要注意的是getMonth()方法必须带括号,微信开发工具自动提示的不带括号,需要自己手动补上括号。

并且data中的value值,目测天数项要减1才能符合,没弄懂这个地方是为什么,

wxml文件

<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: