Analysis of dynamic adding style process of wechat applet click View

Time:2020-2-7

This article mainly introduces wechat applet click View dynamic add style process analysis. The example code is introduced in detail in this article, which has certain reference learning value for everyone’s study or work. You can refer to the following for your friends

Basic logic:

1. Customize dataindex property for each view, starting from 0

2. Customize a class named selected as the selected style

3. Assign the viewid property to 0 in wx.js for default display.

4. Add a click event select to each view, and change the dataindex to the user-defined index of the view when clicking a view

5. Add a three wood operator to the view to control the selected style {{dataindex = = 0? ‘selected’: ‘}}}

Photo:

wxml

<view bindtap="select" data-index= '0'>
   Well received
  </view>
  <view bindtap="select" data-index = '1'> 
   < View > < View > middle evaluation
  </view>
  <view bindtap="select" data-index ='2'>
   < View > < View > bad comments
  </view>

wxss

/*Expression box*/
 .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
  })
 },

Since the initial value of viewid is 0, the first style will be switched by default.

This completes the event:

There are still a few shortcomings in it. Time is too short. Let’s write it like this for the time being.

The above is the whole content of this article, I hope it can help you in your study, and I hope you can support developpaer a lot.