微信小程序?qū)崿F(xiàn)單選按鈕

更新時間：2022年07月18日 15:10:19 作者：onlooker_thinker

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單選按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)單選按鈕的具體代碼，供大家參考，具體內(nèi)容如下

邏輯

單選框的邏輯比較簡單，把所有的元素遍歷出來，等到點(diǎn)擊單選按鈕的時候，當(dāng)value值與遍歷變量值一致的時候就把checked 設(shè)置為true，其他的時候把checked設(shè)置為 false 只需要一次循環(huán)。
復(fù)選框的邏輯，也不復(fù)雜，當(dāng)只有一個被選中的選項(xiàng)的時候，當(dāng)點(diǎn)擊已經(jīng)選擇的選項(xiàng)的時候，首選外層循環(huán)設(shè)置為false，這個時候 e.detail.value為零，所以無法進(jìn)入內(nèi)層循環(huán)，所以被取消。當(dāng)選中未選擇的選項(xiàng)的時候，則從第一個選項(xiàng)開始遍歷，如果value值與外層相同則設(shè)置為TRUE。然后跳出內(nèi)層，繼續(xù)遍歷，當(dāng)有兩個選中的選項(xiàng)的時候，點(diǎn)擊已經(jīng)選擇的按鈕，values值會減少l，所以最后一次的外層循環(huán)無法進(jìn)入內(nèi)層，所有取消該選項(xiàng)。

舉例，兩選一 , 默認(rèn)選中第一個；效果圖如下：

.wxml文件：

<view class='button_container'>
? <block wx:for="{{buttons}}" wx:key="buttons">
? ? <button class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}' bindtap='radioButtonTap'>{{item.name}}</button>
? </block>
</view>

.js文件：

Page({
? data:{
? ? buttons: [{ id: 1, name: '失物招領(lǐng)' }, { id: 2, name: '尋物啟事' }]
? },
? onLoad: function() {//默認(rèn)選了第一個
? ? this.data.buttons[0].checked = true;
? ? this.setData({
? ? ? buttons: this.data.buttons,
? ? })
? },
? ?
? radioButtonTap: function (e) {
? console.log(e)
? let id = e.currentTarget.dataset.id
? console.log(id)
? for (let i = 0; i < this.data.buttons.length; i++) {
? ? if (this.data.buttons[i].id == id) {
? ? ? //當(dāng)前點(diǎn)擊的位置為true即選中
? ? ? this.data.buttons[i].checked = true; ? ?
? ? }
? ? else {
? ? ? //其他的位置為false
? ? this.data.buttons[i].checked = false;
? ? }
? }
? this.setData({
? buttons: this.data.buttons
? })
? }
})

.wxss文件：

.button_container{
? display: flex;
? flex-direction: row;
? justify-content: space-around
? }
??
? /* 按鈕未選中 */
?.normal_button{
? background: white；
? }
??
? /* 按鈕選中 */
? .checked_button{
? background: #36ab60;
? color: white
? }```

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: