小程序 | 自定义轮播指示点、单选、多选框的样式修改

前言：

小程序中有些组件的伪类样式在开发者工具中预览不了

每次要改样式都要搜一下感觉很麻烦

现在把平时自己有用到的记录下：

 1. 基于vant Weapp的自定义单选框样式：（此处展示radio的样式，checkbox同理即可）

    1.1 先来看下vant官网中展示的效果图：

如果跟官网需求一样的就直接官网的就好。

    1.2 自定义之后的效果如图：

         

代码如下：

<view class="blis">
   <van-radio-group value="{{ radio }}" bind:change="chooseRadio">
      <block wx:for="{{arr}}">
          <van-radio name='{{item.id}}' custom-class='{{item.isact?"radioact":""}}'>                               {{item.title}}
          </van-radio>
       </block>
   </van-radio-group>
</view>

.blis{display: flex;flex-wrap: wrap;
    .van-radio {
      display: inline-block;
      margin: 0 10rpx 10rpx 0;
    }
    .van-radio__icon-wrap {display: none;}
    .van-radio__label {
      min-width: 165rpx;height:80rpx;line-height: 80rpx;
      padding: 0 10rpx;box-sizing: border-box;text-align: center;
      background-color:#f4f5f8;border:1.5rpx solid #f4f5f8;
      border-radius:15rpx;
      color:#595959;
      font-size:26rpx;
      word-break: break-word;
    }
    .radioact .van-radio__label {
      color:#3474f6;
      border-color: #3474f6;
      background-color:#f5f7ff;
    }
}

2. 轮播指示点样式修改：

①修改原生：

注意：indicator-dots 要记得写上去，再修改样式

.wx-swiper-dots{  //整个指示点的位置修改（默认居中）
    left: auto;right: 0;
    bottom: 0; //（最低位置0，若指示点在轮播外要自定义）
    .wx-swiper-dot{
      width: 20rpx;height: 6rpx;
      background-color: #000000;
      border-radius: 6rpx;opacity: 0.2;
      margin:0 4rpx;  //设置指示点之间的间距
      &.wx-swiper-dot-active{
        opacity: 1;
      }
    }
  }

②自定义指示点：

通过current 和 bindchange去控制 ，

这样的指示点更灵活想要在什么位置就在什么位置，想要什么样子就什么样子