微信小程序修改radio的默认样式和图标

 

更改小程序radio默认样式 话不多说 上代码

wxml:

      <view class="filterList-sort-list">

                <view wx:for="{{filterList_list1}}"  class="filterList-sort {{stateone==index?'active-tag':''}}" data-index="{{item.name}}" bindtap="itemclickone"  data-key='{{index}}' >{{item.name}}</view>

                </view>    

wxss

.filterList-sort-list,.all-sort-list,.nearby-sort-son,.nearby-sort-list,.capacity-sort-list,.filterList,.filterList-footer{

  background: white;

  }

  .filterList-sort-list,.all-sort-list,.nearby-sort-son,.nearby-sort-list,.capacity-sort-list{

  flex-direction: column;

  border-top: 1px solid rgba(0,0,0,0);

  display: flex;

  }

  .filterList-sort,.all-sort,.nearby-sort-son,.nearby-sort,.capacity-sort{

  font-size: 25rpx;

  height: 70rpx;

  line-height: 70rpx;

  margin-left: 30rpx;

  }

  .filterList-sort-list{

  flex-direction: row;

  padding:0.5rem 0;

  padding-right: 30rpx;

  margin-left: -15px;

  width: 400px;

  }

  .filterList-sort{

  /* width: 20%; */

  width: 68px;

  height: 70rpx;

border-radius: 4px;

border: 1px solid #F0FAF9;

display: flex;

align-items: center;

justify-content: center;

font-size: 20rpx;

color: #06B8A5;

  }

  .active-tag  {   

background: #F0FAF9;  

color: #06B8A5;

border: 1rpx solid #fff;

  } 

js

  filterList_list1:[

    { id: 0, name: '朝东' },

    { id: 1, name: '朝南' },

    { id: 2, name: '朝西' },

    { id: 3, name: '朝北' },

   ],

 itemclickone:function(e){

    let query = e.currentTarget.dataset['index'];

    let index = e.currentTarget.dataset['key']

    let form = this.data.form;

    // form.typefive = '1'

    form.radioval = query

    console.log(query);

    this.setData({

      stateone: index,

      form:form

    });

    // console.log(index,this.data.state);

  },