已完本玄幻小说排行榜,大主宰天蚕土豆

微信小程序——自定義底部導(dǎo)航樣式切換

來源：小破孩呦發(fā)布時(shí)間：2018-11-14 09:56:00 閱讀量：1246

1、以下截圖是靜態(tài)展示部分

解析：

1、catchtap='goHome' 是點(diǎn)擊事件，點(diǎn)擊的時(shí)候傳遞data-num='1'，點(diǎn)擊事件方法名都是一樣的，只是傳入的data-num值不同，通過這個(gè)不同的值，使用三元運(yùn)算符來判斷需要顯示的樣式和圖標(biāo)

2、圖標(biāo)切換，通過上一步說的傳入不同的值，如果num==1的時(shí)候就顯示選中狀態(tài)的圖標(biāo)，否則顯示未選中狀態(tài)的圖標(biāo)

3、文字顏色切換，同理如果num==1的時(shí)候添加類名為active的樣式，否則不添加樣式。

解析：

1、data里邊定義num初始值1，是默認(rèn)選中的第一項(xiàng)。

2、goHome是點(diǎn)擊事件的方法，接受的參數(shù)e,里邊就包含了傳過來的data-num的值，然后通過this.setData({})方法實(shí)時(shí)將data-num傳過來的值更新到data里邊的num上。

至此就達(dá)到了樣式切換的效果，如下：

標(biāo)簽：小程序

評(píng)論：

你還沒有登錄，請(qǐng)先