亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序點(diǎn)擊view動(dòng)態(tài)添加樣式過(guò)程解析

 更新時(shí)間：2020年01月21日 15:11:19   作者：致愛(ài)麗絲  
這篇文章主要介紹了微信小程序點(diǎn)擊view動(dòng)態(tài)添加樣式過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

這篇文章主要介紹了微信小程序點(diǎn)擊view動(dòng)態(tài)添加樣式過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

基本邏輯：

1.給每個(gè)view自定義dataIndex屬性，從0開(kāi)始

2.自定義一個(gè)名為selected的class，作為被選中后的樣式

3.在wx.js中給viewId屬性賦為0，用于默認(rèn)顯示。

4.給每個(gè)view添加一個(gè)點(diǎn)擊事件select，在點(diǎn)擊某個(gè)view時(shí) 將dataIndex變成這個(gè)view的自定義index

5.在view中添加一個(gè)三木運(yùn)算符用于控制選中樣式 {{dataIndex == 0 ? 'selected':''}}

附圖：

wxml

<view class="ICONBOX {{viewId == 0 ? 'selected':''}} " bindtap="select" data-index= '0'>
   <view class="iconfont icon-haoping ic" ></view>好評(píng)
  </view>
  <view class="ICONBOX {{viewId == 1 ? 'selected':''}}" bindtap="select" data-index = '1'> 
   <view class="iconfont icon-zhongping ic"></view>中評(píng)
  </view>
  <view class="ICONBOX {{viewId == 2 ? 'selected':''}}" bindtap="select" data-index ='2'>
   <view class="iconfont icon-bottom-comment ic"></view>差評(píng)
  </view>

wxss

/* 表情盒子 */
 .ICONBOX{
  border: 1px solid red;
  display: flex;
  justify-content: space-around;
  /* flex-direction: */
  align-items: center;
  color: #999;
  font-size: 28rpx;
 }
 .ic{
  margin-right: 5rpx;
 }
 .selected{
  color: #f63
 }

wxjs

 data: {
  
  viewId : 0
 },
 select:function(e){
  this.setData({
   viewId: e.currentTarget.dataset.index
  })
 },

由于viewId初始值是0，所以會(huì)默認(rèn)第一個(gè)切換了樣式。

這樣就完成了該事件：

里面還有幾個(gè)不足之處，時(shí)間倉(cāng)促，暫且就這樣寫(xiě)了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論