小程序<picker-view>组件去除border，改变选中框样式

微信小程序picker-view组件，上下边框隐藏，设置选中框背景色，border-dadius，以及字体颜色，大小等。

wxml

<picker-view class="picker-con" indicator-class="picker-select" value="{{value}}" bindchange="handleDateValueChange">
    <picker-view-column>
        <view wx:for="{{years}}" style="line-height: 50px; text-align: center;" class="{{year===item && 'picker-selected-item'}}">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
        <view wx:for="{{months}}" style="line-height: 50px; text-align: center;" class="{{month===item && 'picker-selected-item'}}">{{item}}月</view>
    </picker-view-column>
</picker-view>

css

.picker-con {
  width: 80vw;
  height: 300px;
  margin: 0 10vw;
  position: relative;
}

/* 选中背景设置：此处必须是before，z-index必须是0，因为picker-view-column的z-index也是0 */
.picker-con::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 90rpx;
  background: #f2f3f6;
  border-radius: 24rpx;
  z-index: 0;
}

.picker-select {
  position: relative;
  height: 50px;
}

.picker-select::before {
  content: '';
  position: absolute;
  top: 0rpx;
  border: none;
}

.picker-select::after {
  content: '';
  position: absolute;
  bottom: 0;
  border: none;
}

.picker-selected-item {
  font-weight: 600;
  color: #008cff;
}

js

 handleDateValueChange(e) {
    const val = e.detail.value || []
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
    })
},