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

成都一家集口碑和實力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術(shù)，十多年企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都1000+客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，品牌網(wǎng)站制作，同時也為不同行業(yè)的客戶提供網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選成都創(chuàng)新互聯(lián)。

基本邏輯：

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

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

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

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

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

附圖：

wxml

   好評
  
   
   中評
  
  
   差評
  

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，所以會默認第一個切換了樣式。

這樣就完成了該事件：

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。