微信小程序點擊實現樣式切換功能的方法

本篇內容主要講解“微信小程序點擊實現樣式切換功能的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“微信小程序點擊實現樣式切換功能的方法”吧!

普通的web開發可以通過JavaScript獲取HTML的Dom結構，但是小程序不可以，小程序實現此功能的方式：數據綁定+data- 去更改標簽類名。

step 1 給選定的標志 {{}} & data-num

此處只綁定了一個類名，也可以綁定N個類名。

class='class1 class2 {{num==1?"active":""}}'<view class='oil_s' catchtap='changeOil'><view class='{{num==1?"active":""}}' data-num='1'>92#汽油</view><view class='{{num==2?"active":""}}' data-num='2'>95#汽油</view><view class='{{num==3?"active":""}}' data-num='3'>0#汽油</view>

綁定一個事件 可以給外面的塊綁定，也可以給每一個里邊的view綁定,如下：

<view class='oil_s' ><view class='{{num==1?"active":""}}' data-num='1' catchtap='changeOil'>92#汽油</view><view class='{{num==2?"active":""}}' data-num='2' catchtap='changeOil'>95#汽油</view><view class='{{num==3?"active":""}}' data-num='3' catchtap='changeOil'>0#汽油</view></view>

唯一的區別是給事件傳入的 e 不同。  綁定在外面的塊的事件的e ,只有 target才會有dataset的值。  綁定給每一個小塊的事件的e ,不管是 target還是currentTarget都會有dataset的值。 

e.target.dataset.num  step 2 寫好初始值

一開始選定哪一個，就給判斷的那個變量哪個值

data: {num:1},

step 3 寫好事件處理函數

changeOil:function(e){console.log(e);this.setData({num:e.target.dataset.num})}

原理 是改變一下 用來判斷的那個變量 num 的值而已。

他人的做法：

我用的類名active ,有的人會用cur ，【current的簡寫】  有人甚至總結出了三種方式：

1.通過修改類名 <view class="{{className}}"></view>2.添加一個類名，覆蓋前面的樣式 <view class="helplist {{cur}}"></view>3.修改行內樣式，覆蓋前面的樣式 <view class="helplist" style="{{currentStyle}}"></view>

第二種方式跟我的一樣，第三種方式最好不要使用，畢竟我們要做一個性能佳的小程序。  至此，完成。 

到此，相信大家對“微信小程序點擊實現樣式切換功能的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！