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

最新推荐文章于 2025-04-03 10:47:13 发布

xx_小熊

最新推荐文章于 2025-04-03 10:47:13 发布

阅读量8.4k

点赞数 3

本文链接：https://blog.youkuaiyun.com/qq_42975998/article/details/88833461

版权

本文介绍如何使用picker-view组件并通过自定义indicator-class实现独特的选择器样式，包括改变边框颜色及渐变效果，同时提供调整边框长度的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
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;
}

在这里插入图片描述