微信小程序——好看的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.idconsole.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 {//其他的位置为falsethis.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.idconsole.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 {//其他的位置为falsethis.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.itemsfor (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}}"】