网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

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

發布時間:2018-05-09 11:02 所屬欄目:小程序開發教程

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

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

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

 

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

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

 

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

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

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

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

 

  1. data: {
  2. num:1
  3. },

step 3 寫好事件處理函數

 

  1. changeOil:function(e){
  2. console.log(e);
  3. this.setData({
  4. num:e.target.dataset.num
  5. })
  6. }

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

他人的做法:

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

 

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

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



易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/24352.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×