微信小程序自定义单选框样式实现单选功能

本文实例为大家分享了微信小程序自定义单选框样式实现单选功能的具体代码，供大家参考，具体内容如下

实现效果：

选择小车时，其他类型的车取消选中。

具体思路：

用数组存几种类型车的数据，给每条数据设置点击未选中的效果（checked 设为 false）。点击某一种车时，获取其下标，将它的设置为选中（checked 设置 true）。

代码如下：

// index.js
Page({

? /**
? ?* 页面的初始数据
? ?*/
? data: {
? ? list: [{
? ? ? ? img: "image/car.png",
? ? ? ? name: "小车",
? ? ? ? type: "C1/C2/C3",
? ? ? ? checked: true,
? ? ? },
? ? ? {
? ? ? ? img: "image/trucks.png",
? ? ? ? name: "货车",
? ? ? ? type: "A2/B2",
? ? ? ? checked: false,
? ? ? },
? ? ? {
? ? ? ? img: "image/passenger-car.png",
? ? ? ? name: "客车",
? ? ? ? type: "A1/A3/B1",
? ? ? ? checked: false,
? ? ? },
? ? ? {
? ? ? ? img: "image/motorbike.png",
? ? ? ? name: "摩托车",
? ? ? ? type: "D/E/F",
? ? ? ? checked: false,
? ? ? }
? ? ],
? },

? // 选择
? choose: function (e) {

? ? let index = e.currentTarget.dataset.id;
? ? let list = this.data.list;
? ? for (let i = 0; i < list.length; i++) {
? ? ? this.data.list[i].checked = false;
? ? }
? ? if (list[index].checked) {
? ? ? this.data.list[index].checked = false;
? ? } else {
? ? ? this.data.list[index].checked = true;
? ? }
? ? this.setData({
? ? ? list: this.data.list
? ? })
? },

})

<!-- wxml -->
? <view class="chooseType" >

? ? <view class=" {{item.checked?'chooseType-content-select':'chooseType-content'}}'" wx:for="{{list}}" wx:key="index" data-id="{{index}}" bindtap="choose">
? ? ? <image class="chooseType-content-img" src="{{item.img}}"></image>
? ? ? <view>{{item.name}}</view>
? ? ? <view class="chooseType-content-type">{{item.type}}</view>
? ? </view>

?</view>

?/* wxss */
.chooseType {
? width: 100%;
? height: 200rpx;
? display: flex;
? align-items: center;
? justify-content: space-between;
? border-bottom: rgb(197, 196, 187) 1rpx solid;
? font-size: 30rpx;
? background: #FFFFFF;
}

.chooseType-content-img{
? width: 90rpx;
? height: 90rpx;
}


.chooseType-content{
? width: 25%;
? height: 100%;
? display: flex;
? align-items: center;
? flex-direction: column;
}

.chooseType-content-select{
? width: 25%;
? height: 100%;
? display: flex;
? align-items: center;
? flex-direction: column;
? background: rgb(163, 162, 162,0.2);
}

.chooseType-content-type{
? margin-top: 10rpx;
? font-size: 30rpx;
? color: #b3b0b0;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序自定义单选框样式实现单选功能的详细内容...