微信小程式button選中改樣式 實現單選 多選

小程式實現多button單選/多選

紅色為選中狀態

單選

多選

①wxss

/* pages/button-select/button-select.wxss */

.button_container
/* 按鈕未選中 */
.normal_button
/* 按鈕選中 */
.checked_button

樣式選中改變是通過三元運算子實現的

}}

在page()中填充按鈕資料

data: , , ],

msg:'',
},

預設使第乙個按鈕被選中page()

onload: function (options) )

},

在page()中新增事件監聽方法(單選)

/**

* 事件監聽,實現單選效果
* e是獲取e.currenttarget.dataset.id所以是必備的，跟前端的data-id獲取的方式差不多
*/radiobuttontap: function (e) 
else 
}this.setdata()
},

在page()中新增事件監聽方法(多選)

記得在wxml中修改繫結方法bindtap='radiobuttontap'

checkbuttontap:function(e) else }}

this.setdata()
},

微信小程式 button 元件

button 的屬性 size 型別 字串 按鈕的大小 屬性值 default 預設的 mini 小尺寸 type 型別 字串 按鈕的樣式型別 屬性值 default 預設的 primary 綠色的 warn 紅色的 plain 型別 布林 按鈕是否鏤空，背景色透明 disabled 型別 布林 是...

微信小程式 隱藏button邊框

想使用button自帶的disable屬性和效果，但又不需要button顯示邊框線 button控制項有一條淡灰色的邊框，在控制項上了樣式border radius 0 無法讓button邊框隱藏 如下 解決方案發現button控制項有乙個偽元素 after 這偽元素有border屬性，預設為bor...

微信小程式去除Button預設樣式

在小程式開發過程中，使用率蠻高的元件button，因為經常要去除預設樣式，然後再自定義樣式，所以經常寫，自己也總結分享一下簡單的實現步驟。一 實現效果 1 實現前 預設樣式 2 實現後 去除預設邊框和背景色 二 實現過程 1 使用 after 偽類選擇器，因為button的邊框樣式是通過 after...