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

更新時(shí)間：2020年01月21日 15:11:19 作者：致愛麗絲

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

基本邏輯：

1.給每個view自定義dataIndex屬性，從0開始

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

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

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

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

附圖：

wxml

<view class="ICONBOX {{viewId == 0 ? 'selected':''}} " bindtap="select" data-index= '0'>
   <view class="iconfont icon-haoping ic" ></view>好評
  </view>
  <view class="ICONBOX {{viewId == 1 ? 'selected':''}}" bindtap="select" data-index = '1'> 
   <view class="iconfont icon-zhongping ic"></view>中評
  </view>
  <view class="ICONBOX {{viewId == 2 ? 'selected':''}}" bindtap="select" data-index ='2'>
   <view class="iconfont icon-bottom-comment ic"></view>差評
  </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，所以會默認(rèn)第一個切換了樣式。

這樣就完成了該事件：

里面還有幾個不足之處，時(shí)間倉促，暫且就這樣寫了。

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

您可能感興趣的文章:

相關(guān)文章

微信小程序點(diǎn)擊滾動到指定位置的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序點(diǎn)擊滾動到指定位置的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
JQuery 表格操作(交替顯示、拖動表格行、選擇行等)
JQuery 表格操作包括交替顯示、拖動表格行、選擇行等功能，大家可以參考下。
2009-07-07
JS動態(tài)添加選項(xiàng)案例分析
這篇文章主要介紹了JS動態(tài)添加選項(xiàng)的方法,結(jié)合實(shí)例形式分析了javascript針對頁面元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
2016-10-10
JavaScript實(shí)現(xiàn)簡單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
微信小程序使用template標(biāo)簽實(shí)現(xiàn)五星評分功能
這篇文章主要為大家詳細(xì)介紹了微信小程序使用template標(biāo)簽實(shí)現(xiàn)五星評分功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
js無法獲取到html標(biāo)簽的屬性的解決方法
下面小編就為大家?guī)硪黄猨s無法獲取到html標(biāo)簽的屬性的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
JS基于myFocus庫實(shí)現(xiàn)各種功能的tab選項(xiàng)卡切換效果
這篇文章主要介紹了JS基于myFocus庫實(shí)現(xiàn)各種功能的tab選項(xiàng)卡切換效果,實(shí)例演示了JS實(shí)現(xiàn)tab嵌套顯示及常用過度效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
JS訪問SWF的函數(shù)用法實(shí)例
這篇文章主要介紹了JS訪問SWF的函數(shù)用法,實(shí)例分析了javascript訪問swf文件的方法及易錯點(diǎn)的處理技巧,需要的朋友可以參考下
2015-07-07
JSONP原理及應(yīng)用實(shí)例詳解
這篇文章主要介紹了JSONP原理及應(yīng)用實(shí)例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
js 實(shí)現(xiàn)圖片預(yù)加載(js操作 Image對象屬性complete ，事件onload 異步加載圖片)
通過js操縱DOM很多情況下都是為了實(shí)現(xiàn)和當(dāng)前頁html元素的異步載入，我談?wù)剬mage對象的一些認(rèn)識。
2011-03-03