小程序picker-view改变选中上下边框样式

picker-view有这样l两个属性 indicator-style 和 indicator-class

我们只需要设置：

<picker-view 
      indicator-class="picker-box"
      style="width: 100%; height: 200px;"
      bindchange="drugChange">
      <picker-view-column>
        <view wx:for="{{drugList}}" wx:key="{{item}}" style="line-height: 36px;text-align:center">{{item}}</view>
      </picker-view-column>
 </picker-view>

然后css样式,，将原有边框变成透明，加上自己想要的渐变：

.picker-box{
  width:100%;
  height: 96rpx;
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(to right,white,red,white) 1 10;
}

如果想要线短一点，在外层view设置一个padding即可：

<view style="padding:150rpx">
   <picker-view 
      indicator-class="picker-box"
      style="width: 100%; height: 200px;"
      bindchange="drugChange">
      <picker-view-column>
        <view wx:for="{{drugList}}" wx:key="{{item}}" style="line-height: 36px;text-align:center">{{item}}</view>
      </picker-view-column>
      </picker-view>
</view>

设置别的颜色一样的：

.picker-box{
  width:100%;
  height: 96rpx;
  border-top:4px solid skyblue;
  border-bottom:4px solid skyblue;
  border-radius: 4rpx;
}