微信小程序picker-view更改背景颜色

2020-09-18  本文已影响0人  kingLeft7
<view class="page-body">
            <view class="selected-date">{{year}}年{{month}}月{{day}}日{{isDaytime ? "白天" : "夜晚"}}</view>
            <picker-view  mask-style="background:#232425; z-index:0;" indicator-style="height: 50px;background:red; z-index:0" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
                <picker-view-column>
                    <view wx:for="{{years}}" wx:key="{{years}}" style="line-height: 50px; text-align: center;">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view wx:for="{{months}}" wx:key="{{months}}" style="line-height: 50px; text-align: center;b">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view wx:for="{{days}}" wx:key="{{days}}" style="line-height: 50px; text-align: center;">{{item}}日</view>
                </picker-view-column>
            </picker-view>
        </view>

mask-style必须加z-index:0 不然内容(2019年几月几日)会被覆盖

  bindChange(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]],
      isDaytime: !val[3]
    })
  },
  data: {
    years,
    year: date.getFullYear(),
    months,
    month: 2,
    days,
    day: 2,
    value: [9999, 1, 1],
    isDaytime: true,
  },
image.png
上一篇下一篇

猜你喜欢

热点阅读