zoukankan      html  css  js  c++  java
  • 微信小程序spicker-view如何给选中框设定字体颜色

    小程序开发过程中有选身高的功能,用了picker-view。官方文档说indicator-styleindicator-class是设定选中框的样式和类名。我用的是uni-app框架

    然后就设置了上下边框颜色以及字体颜色,但是发现字体颜色并没有效果,代码如下:

    html部分:

    <view class="selectPicker">
       <picker-view class="picker" indicator-class="picker-box"  indicator-style="height:80upx;" :value="value" @change="bindChange">
            <picker-view-column class="item">
                 <view  class="text"  v-for="(item,index) in heights" :key="index">{{item}} cm</view>
            </picker-view-column>
        </picker-view>
    </view> 

    JS部分:

    const heights = []
        for (let i = 100;  i<= 230; i++) {
            heights.push(i)
        }
        export default {
            data: function () {
                return {
                    title: 'picker-view',
                    heights:heights,
                    height:165,
                    value:[65]
                }
            },
            methods: {
                bindChange: function (e) {
                    const val = e.detail.value
                    this.value = val
                    this.height = this.heights[val[0]]
                    console.log(this.height)
                }
            }
        }

    CSS部分:

    .picker-box{
          width:100%;
          border-top:3upx solid #4CD964;
          border-bottom:3upx solid #4CD964;
          color: #4CD964;
        }

    效果图如下:

     后来网上查了,大家都是设置不了,于是就用索引来给选中框选中样式。但是遇到了一个坑,一开始我是为了省几行代码,直接使用:style来添加样式。

    <view class="selectPicker">
        <picker-view class="picker" indicator-class="picker-box"  indicator-style="height:80upx;" :value="value" @change="bindChange">
             <picker-view-column class="item">
                  <view :style="value[0]==index?'color:#4CD964;':''" class="text"  v-for="(item,index) in heights" :key="index">{{item}} cm</view>
              </picker-view-column>
         </picker-view>
    </view> 

    value(是个数组形式,所以需要value[0])的值官方文档介绍了是选中框的索引,一旦滚动就会触发change事件,value的值就会变成选中框的索引。所以用value[0]的值和index来比较是否相等。相等则会增加样式color。这样写,出现了个bug,就是选中框的value和选中框的值不对应。如下图:是我拍的视频然后截图,不是很清晰。

    明明选的是1948,但是选中框显示的是1948和1949之间的内容,越往下滑,越明显。

    然后就改了,用class动态名来绑定样式,发现字体颜色最终改变了。代码如下:

    HTML:

    <view class="selectPicker">
       <picker-view class="picker" indicator-class="picker-box"  indicator-style="height:80upx;" :value="value" @change="bindChange">
            <picker-view-column class="item">
                  <view :class="value[0]==index?'pickerSelected':''" class="text"  v-for="(item,index) in heights" :key="index">{{item}} cm</view>
            </picker-view-column>
       </picker-view>
    </view> 

    增加的CSS代码:

    .pickerSelected{
        color: #4CD964;
    }

      

  • 相关阅读:
    【转】Lesktop 1.0 ——开源JS控件库,WebIM和网盘
    个人开公司的流程,以后用得着(转)
    C#中的弱引用
    同步异步的知识补充
    SynchronizationContext
    泛型弱引用(不继承 System.WeakReference)
    【转】亂數產生器:Random 與 RNGCryptoServiceProvider
    Oracle trunc()函数的用法
    [转]C# WinForm自定义控件整理
    自定义控件小结进阶篇(转)
  • 原文地址:https://www.cnblogs.com/huangqihui/p/12979391.html
Copyright © 2011-2022 走看看