美文网首页
微信小程序picker-view更改背景颜色

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

作者: kingLeft7 | 来源:发表于2020-09-18 17:18 被阅读0次
    <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

    相关文章

      网友评论

          本文标题:微信小程序picker-view更改背景颜色

          本文链接:https://www.haomeiwen.com/subject/qsbjyktx.html