欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年07月19日 09:26:57   作者:牛哞哞雜記  
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義單選框樣式實(shí)現(xiàn)單選功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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)圖例顯示百分比效果

    利用Echarts實(shí)現(xiàn)圖例顯示百分比效果

    EChart開(kāi)源來(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
  • 探討JavaScript中聲明全局變量三種方式的異同

    探討JavaScript中聲明全局變量三種方式的異同

    這篇文章主要介紹了JavaScript中聲明全局變量三種方式的異同。變量及變量聲明是一門(mén)語(yǔ)言最基本的概念,初學(xué)者都會(huì)很快掌握。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2013-12-12
  • JavaScript 鏈表定義與使用方法示例

    JavaScript 鏈表定義與使用方法示例

    這篇文章主要介紹了JavaScript 鏈表定義與使用方法,結(jié)合實(shí)例形式分析了JavaScript 鏈表的基本功能、定義與使用方法,需要的朋友可以參考下
    2020-04-04
  • 解析從小程序開(kāi)發(fā)者工具源碼看原理實(shí)現(xiàn)

    解析從小程序開(kāi)發(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-06
  • ESLint詳解及在WebStorm中的應(yīng)用步驟

    ESLint詳解及在WebStorm中的應(yīng)用步驟

    ESLint是一種JavaScript代碼檢查工具,開(kāi)發(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í)例解析

    這篇文章主要介紹了使用smartupload組件實(shí)現(xiàn)jsp+jdbc上傳下載文件實(shí)例解析,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-01-01
  • ES6/JavaScript使用技巧分享

    ES6/JavaScript使用技巧分享

    本篇文章主要給大家講解了ES6/JavaScript使用技巧,需要的朋友參考一下吧。
    2017-12-12
  • 用 JavaScript 給站外鏈接的 cursor 進(jìn)行改造

    用 JavaScript 給站外鏈接的 cursor 進(jìn)行改造

    用 JavaScript 給站外鏈接的 cursor 進(jìn)行改造...
    2006-12-12
  • TypeScript環(huán)境搭建的實(shí)現(xiàn)步驟

    TypeScript環(huán)境搭建的實(shí)現(xiàn)步驟

    本文主要介紹了TypeScript環(huán)境搭建的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • 微信小程序自定義支持圖片的彈窗

    微信小程序自定義支持圖片的彈窗

    這篇文章主要為大家詳細(xì)介紹了微信小程序自定義支持圖片的彈窗,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12

最新評(píng)論