最近在做小程序時(shí)候遇到了自定義按鈕單選操作的問(wèn)題,因?yàn)樾〕绦蚺d起時(shí)間不是很長(zhǎng),遇到問(wèn)題網(wǎng)上的答案知之甚少,所以將我解決問(wèn)題的方法貼出來(lái),希望各位開發(fā)者互相交流,如果有更好的解決方法大家一起學(xué)習(xí)...

01.png

如上圖所示,有6個(gè)按鈕,要求是按鈕單選操作.

經(jīng)過(guò)各種碰壁操作之后,得到了最終的解決方案,開始擼代碼

首先按鈕是圖片創(chuàng)建的,然后按鈕有兩種狀態(tài),普通狀態(tài)和高亮狀態(tài)

圖片數(shù)據(jù)數(shù)組.png

在.js里面創(chuàng)建數(shù)組,按鈕是6個(gè)button,所以數(shù)組里面創(chuàng)建6個(gè)字典,字典里面三個(gè)字段"name","icon","icon_Hl",name字段沒(méi)有用到,icon是普通狀態(tài)下的圖片路徑,icon_Hl是高亮狀態(tài)下的路徑

接下來(lái)第二部,用數(shù)組循環(huán)創(chuàng)建button

數(shù)組循環(huán)創(chuàng)建button.png

***注意圖中的紅色箭頭,data-index不是微信小程序的屬性名稱,而是微信小程序給元素開辟的一塊空間里面可以放任何你定義的屬性(比如data-index 或者data-zhangsan),記住開頭要以"data-"開頭,圖中我將數(shù)組的下標(biāo)賦值給了data-index***

好了到這一步圖片按鈕創(chuàng)建完成,接下來(lái)按鈕單選

按鈕點(diǎn)擊事件.png

在點(diǎn)擊事件里面獲取到上面賦值到data-index里面的值,也就是var index.

然后刷新數(shù)據(jù),將index賦值給selectedIndex,此時(shí)的selectedIndex就是點(diǎn)擊的按鈕的下標(biāo).

***setData方法會(huì)刷新當(dāng)前頁(yè)面***

最后實(shí)現(xiàn)單選效果

單選效果.png

用 if, else if 語(yǔ)句,判斷循環(huán)創(chuàng)建是數(shù)組的下標(biāo)是否等于selectedIndex,如果等于,那么這個(gè)按鈕就會(huì)高亮狀態(tài),否則就是正常狀態(tài).

大家有什么更好的方法可以發(fā)出來(lái),一起學(xué)習(xí),共同進(jìn)步...