小程序中如何修改picker-view中选中的样式

最新推荐文章于 2025-03-10 15:49:59 发布

原创最新推荐文章于 2025-03-10 15:49:59 发布 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

本文讲解了在WXML中如何使用picker-view组件的indicator-class属性修改背景颜色和边框，同时介绍了通过比较选中值和索引来改变文本样式的技巧。

picker-view中的indicator-class不能修改其选中的文字的样式，但可以修改背景颜色和边框

 <picker-view
    indicator-class="city-picker"
    value="{{[selectValue]}}"
    bindchange="bindChange"
    ></picker-view>
//样式
.city-picker{
  height: 80rpx;
  border-top:1rpx solid #CCCCCC;
  border-bottom:1rpx solid #CCCCCC0;
}

效果如下

若要改其文本样式，可以通过选中的值和索引进行比对

<picker-view-column>
                <view
                  wx:for="{{listData}}"
                  wx:key="{{index}}"
                  class="city-column {{selectValue === index ?'city-column_select':''}}">{{item.value}}</view>
            </picker-view-column>
//样式
.city-column_select{
    font-size: 30rpx;
    color:#f00;
}

效果如下