微信小程序自定義單選框樣式實(shí)現(xiàn)單選功能
本文實(shí)例為大家分享了微信小程序自定義單選框樣式實(shí)現(xiàn)單選功能的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)效果:
選擇小車時(shí),其他類型的車取消選中。
具體思路:
用數(shù)組存幾種類型車的數(shù)據(jù),給每條數(shù)據(jù)設(shè)置點(diǎn)擊未選中的效果(checked 設(shè)為 false)。點(diǎn)擊某一種車時(shí),獲取其下標(biāo),將它的設(shè)置為選中(checked 設(shè)置 true)。
代碼如下:
// index.js Page({ ? /** ? ?* 頁(yè)面的初始數(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; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用Echarts實(shí)現(xiàn)圖例顯示百分比效果
EChart開源來(lái)自百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊(duì),基于html5?Canvas,是一個(gè)純Javascript圖表庫(kù),提供直觀,生動(dòng),可交互,可個(gè)性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart實(shí)現(xiàn)圖例中顯示百分比的效果,感興趣的可以學(xué)習(xí)一下2022-03-03解析從小程序開發(fā)者工具源碼看原理實(shí)現(xiàn)
小程序的架構(gòu)設(shè)計(jì)與web技術(shù)還是有一定的差別,其吸取了web技術(shù)的一些優(yōu)勢(shì),同時(shí)也摒棄web技術(shù)中體驗(yàn)等不好的地方。下面通過(guò)問(wèn)題的形式來(lái)說(shuō)說(shuō)小程序架構(gòu)中的一些設(shè)計(jì)點(diǎn)2021-06-06ESLint詳解及在WebStorm中的應(yīng)用步驟
ESLint是一種JavaScript代碼檢查工具,開發(fā)者可以通過(guò)自定義規(guī)則進(jìn)行代碼風(fēng)格和質(zhì)量的控制,使用ESLint的過(guò)程包括安裝、初始化配置、配置規(guī)則、運(yùn)行ESLint檢查代碼、與編輯器集成,以及與構(gòu)建工具集成等,需要的朋友可以參考下2024-09-09使用smartupload組件實(shí)現(xiàn)jsp+jdbc上傳下載文件實(shí)例解析
這篇文章主要介紹了使用smartupload組件實(shí)現(xiàn)jsp+jdbc上傳下載文件實(shí)例解析,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01用 JavaScript 給站外鏈接的 cursor 進(jìn)行改造
用 JavaScript 給站外鏈接的 cursor 進(jìn)行改造...2006-12-12TypeScript環(huán)境搭建的實(shí)現(xiàn)步驟
本文主要介紹了TypeScript環(huán)境搭建的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01