微信小程序自定義單選框樣式實現(xiàn)單選功能

更新時間：2022年07月19日 09:26:57 作者：牛哞哞雜記

這篇文章主要為大家詳細介紹了微信小程序自定義單選框樣式實現(xiàn)單選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序自定義單選框樣式實現(xiàn)單選功能的具體代碼，供大家參考，具體內容如下

實現(xiàn)效果：

選擇小車時，其他類型的車取消選中。

具體思路：

用數(shù)組存幾種類型車的數(shù)據(jù)，給每條數(shù)據(jù)設置點擊未選中的效果（checked 設為 false）。點擊某一種車時，獲取其下標，將它的設置為選中（checked 設置 true）。

代碼如下：

// index.js
Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? 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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: