微信小程序——好看的radio单选项框，wxml里列表中遍历数组获取id传回给js页面

微信小程序——好看的radio单选项框

第一种

效果图如下：

.wxss代码：

.view_container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top:50rpx ;
  
}

/* 按钮未选中 */
.normal_button {
  background: white；
}

/* 按钮选中 */
.checked_button {
  background: #4583f7;
  color: white
}


.view_base{
  background-color: #ffede6;
  /* 字体颜色 */
  color:#c58268;
  display: flex;
  margin: 20rpx 10rpx 0rpx 10rpx;
  border-radius: 15rpx;
  padding: 10rpx;
  align-items: center;
  justify-content: center;
}

/* view未选中 */
.normal_view {
  

}

/* view选中 */
.checked_view {
  /* 边框 */
  border: 3rpx solid #237bff;
}

.wxml代码：

<view class='view_container'>
  <block wx:for="{{list_radio}}" wx:key="list_radio">
    <button class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}'
      bindtap='radioButtonTap'>{{item.name}}</button>
  </block>
</view>


<view class='view_container'>
  <block wx:for="{{list_radio}}" wx:key="list_radio">
    <view class='view_base {{item.checked?"checked_view":"normal_view"}}' data-id='{{item.id}}'
      bindtap='radioButtonTap_2'>
      
      {{item.name}}</view>
  </block>
</view>

.js代码：

const app = getApp()

Page({
  data: {
    list_radio: [{
      id: 1,
      name: '选项1'
    }, {
      id: 2,
      name: '选项2'
    }, {
      id: 3,
      name: '选项3'
    }]
  },
  onLoad: function () {
    this.data.list_radio[0].checked = true;
    this.setData({
      list_radio: this.data.list_radio,
    })
  },
/**
 * 第一行radio
 * @param {*} e 
 */
  radioButtonTap(e) {
    console.log(e)
    let id = e.currentTarget.dataset.id
    console.log(id)
    for (let i = 0; i < this.data.list_radio.length; i++) {
      if (this.data.list_radio[i].id == id) {
        //当前点击的位置为true即选中
        this.data.list_radio[i].checked = true;
      } else {
        //其他的位置为false
        this.data.list_radio[i].checked = false;
      }
    }
    this.setData({
      list_radio: this.data.list_radio
    })
  },

/**
 * 第二行radio
 * @param {*} e 
 */
  radioButtonTap_2(e) {
    console.log(e)
    let id = e.currentTarget.dataset.id
    console.log(id)
    for (let i = 0; i < this.data.list_radio.length; i++) {
      if (this.data.list_radio[i].id == id) {
        //当前点击的位置为true即选中
        this.data.list_radio[i].checked = true;
      } else {
        //其他的位置为false
        this.data.list_radio[i].checked = false;
      }
    }
    this.setData({
      list_radio: this.data.list_radio
    })
  },


})

第二种

效果图：

.xml代码：

<view>
  <block wx:for="{{price_array}}">
    <view class="chose-txt" data-price="{{item.price}}" data-id="{{index}}" bindtap="choseItem"
      style="{{index == id?'background:url(../images/chosed.png) right no-repeat; border:1rpx solid #e8580c; color: #e8580c':'background:url();border:1rpx solid gainsboro;color:gray'}}">
      <text class="chose-p">{{item.name}}</text>
      <text class="chose-p">{{item.price}}元</text>
    </view>
  </block>
</view>

.xss代码

.chose-txt{
  border-radius: 6px;  font-size: 26rpx;   height: 40px;  width:  27.5%;  margin: 5px; float: left;padding-top: 5px;
}
.chose-p{
  line-height: 18px; width: 100%; height:20px; text-align:  center; float: left;
}

.js代码

Page({
  data: {
    price_array: [{
      name: '正常套餐',
      price: '98'
    }, {
      name: '亲民套餐',
      price: '198'
    }, {
      name: '女神套餐',
      price: '298'
    }, {
      name: '霸王套餐',
      price: '598'
    }],
    id: 0,
  },
  onLoad() {

  },
  choseItem: function (e) {
    var id = e.currentTarget.dataset.id; //获取自定义的ID值
    this.setData({
      id: id
    })
  },
})

第三种

效果图：

index代码：

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    items: [
      { value: 'USA', name: '美国' },
      { value: 'CHN', name: '中国', checked: 'true' },
      { value: 'BRA', name: '巴西' },
      { value: 'JPN', name: '日本' },
      { value: 'ENG', name: '英国' },
      { value: 'FRA', name: '法国' },
    ]
  },

  onLoad() {

  },

  radioChange(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
    const items = this.data.items
    for (let i = 0, len = items.length; i < len; ++i) {
      items[i].checked = (items[i].value === e.detail.value)//选了后就items里的checked改成true
    }
    this.setData({
      items
    })
  }

})

.wxml代码：

<view class="container">
  <radio-group bindchange="radioChange">
    <label class="radio_label" wx:for="{{items}}" wx:key="{{item.value}}">
      <view class="radio_label_hd" style="border: 3rpx solid  {{item.checked? '#ffde00': '#d5dfec'}}">
        <radio class="radio_a" color="#ffde00" value="{{item.value}}" checked="{{item.checked}}" />
        <view class="weui-cell__bd">{{item.name}}</view>
      </view>
    </label>
  </radio-group>
</view>

.wxss代码：

.radio_label_hd{
  width: 80vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 10px;
  border-radius: 8px;
  padding: 5px 0px; 
}

.radio_a{
  transform:scale(0.7);

}

第四种

wxml

<view class='view-contain'>
  <block wx:for="{{arrayList}}" wx:key='{index}'>
    <view class="view-cell " style="{{swiperItemIndex==index&&'border: 1px solid #FFDE00;'}}"
      bindtap="pickerValueChange" data-id="{{index}}">
      <text class="text-cellsize">{{item.cellName}}</text>
      <view class="view-sum" style="{{item.sum==0&&'background-color: #A2A4AD;'}}">
        <text style="{{item.sum==0&&'color: #fff;'}}">{{item.sum}}</text></view>
    </view>
  </block>
</view>

wxss

.view-contain {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: auto;
  padding: 0 24px;
}

.view-cell {
  /* width: 152px; */
  width:40vw;
  height: 58px;
  background: #FFFFFF;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid #ffffff;
}

.text-cellsize {
  width: auto;
  height: 21px;
  font-size: 15px;
  font-weight: bolder;
  color: #62677D;
  line-height: 21px;
  font-family: STCaiyun;
}

.view-sum {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #FFDE00;
  border-radius: 8px 0px 8px 0px;
  font-weight: bolder;
}

.view-sum text {
  font-size: 17px;
  color: #404352;
}

js

const app = getApp()

Page({
  data: {
    arrayList: [{
        sum: '1',
        cellName: '超大格口',        
      }, {
        sum: '3',
        cellName: '特大格口',
      }, {
        sum: '2',
        cellName: '大格口',
      }, {
        sum: '0',
        cellName: '中格口',
      }, {
        sum: '3',
        cellName: '小格口',
      }
    ],
    swiperItemIndex:0
  },

  onLoad() {

  },
  pickerValueChange(e) {
    console.log("点击：",e)
    this.setData({
        // pickerValue: e.detail.value,
        swiperItemIndex: e.currentTarget.dataset.id
    })
},



})

wxml里遍历数组获取id传回给js页面

主要的wxml代码：

<block wx:for="{{lists}}" wx:key="{{index}}">
  <text data-id="{{index}}" bindtap="test">测试</text>
</block>

js代码：

Page({
  data: {
    lists:[{},{}],
  },
  
test: function(event){
  var id = event.currentTarget.dataset.id;//使用event.currentTarget.dataset.XX获取内容
  console.log(id);
} 
})

可以使用wx:for-index="idx"或者wx:key=“index” 【wx:key="{{index}}"】