收藏
回答

picker-view、picker-view-column怎么修改中间的线条成如图的颜色?

最后一次编辑于  2021-11-30
回答关注问题邀请回答
收藏

5 个回答

  • 炸鸡
    炸鸡
    2021-12-30

    可以修改,需要修改indicator-class中的:after与:before,由于框架是taro-react所以直接贴代码了

    // jsx or wxml or template
    <PickerView indicatorClass={styles.indicator}>
      <PickerViewColumn>...</PickerViewColumn>
    </PickerView>
    
    // scss
    .indicator {
      width: 100%;
      height: 40px;
    
      &::after{
        content:'';
        height: 1px;
        width: 100%;
        border-color: rgba($color: #fff, $alpha: 0.1); // 这里设置上需要的颜色即可
      }
    
    
      &::before{
        content: '';
        height: 1px;
        width: 100%;
        border-color: rgba($color: #fff, $alpha: 0.1); // 这里设置上需要的颜色即可
      }
    }
    
    2021-12-30
    有用 3
    回复 2
    • MY
      MY
      2022-07-05
      有用,style是scoped的需要加/deep/
      2022-07-05
      回复
    • Ethan、
      Ethan、
      2023-07-19
      有用
      2023-07-19
      回复
  • 大熊
    大熊
    2022-05-18

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段

    2022-05-18
    有用 3
    回复
  • 小寅
    小寅
    2021-12-09

    可以用这段代码先把默认的两条线去掉

    .选择器中间选中框的类名::before {
        display: none;
    }
    
    .选择器中间选中框的类名::after {
        display: none;
    }
    


    再重新写上下边框

    .选择器中间选中框的类名 {
        border-top: 2rpx solid #333333;
        border-bottom: 2rpx solid #333333;
    }
    
    2021-12-09
    有用 1
    回复 1
    • MY
      MY
      2021-12-22
      为啥我试了不行
      2021-12-22
      回复
  • 微喵网络
    微喵网络
    2021-11-30

    改不了

    2021-11-30
    有用
    回复 3
    • MY
      MY
      2021-11-30
      picker-view,不是picker,我打错了
      2021-11-30
      回复
    • 微喵网络
      微喵网络
      2021-11-30回复MY
      一样,改不了
      2021-11-30
      回复
    • MY
      MY
      2021-11-30回复微喵网络
      好的,谢谢
      2021-11-30
      回复
  • 游戏人生
    游戏人生
    2021-11-30

    picker 源生组件 无法配置颜色哦

    要自定义的颜色的化,只能自己写模拟

    2021-11-30
    有用
    回复 2
    • MY
      MY
      2021-11-30
      picker-view,不是picker,我打错了
      2021-11-30
      回复
    • 游戏人生
      游戏人生
      2021-11-30回复MY
      也是改不了的
      2021-11-30
      回复
登录 后发表内容