Code example for modifying style by clicking on the control of WeChat applet

This article mainly introduces relevant information on detailed examples of clicking on the control to modify the style of the WeChat applet. Friends in need can refer to

Detailed explanation of the example of modifying the style of the clicking control on the WeChat applet

Now we need to implement the click control modification style in the WeChat applet, as follows:

The WeChat applet does not support direct manipulation of dom. To achieve this effect , we need to achieve it by setting data and then using two-way binding of data and interface.

Step one: Define the clicked and unclicked styles in wxss, as follows:

.service_selection .is_checked{ 
 border: 1px solid #FE0002 ; 
 color: #FE0002 ; 
 background: #fff; 
} 
.service_selection .normal{ 
 border: none; 
 color: #333; 
 background: #F0F1EC; 
}

Step 2: Set a flag in the data in the js file and call it isChecked. The default isChecked==false. As follows:

##

data: { 
  isChecked: false 
 }

Step 3: Bind the click event in the wxml file,

<view bindtap="serviceSelection"></view>

Implement this method in the js file and set isChecked==true after clicking. As follows:

serviceSelection(){ 
  this.setData({ 
   isChecked:true 
  }) 
}

Step 4: Still perform data binding in the wxml file:

<view class="{{isChecked?&#39;is_checked&#39;:&#39;normal&#39;}}" bindtap="serviceSelection"></view>

The key point is this code

{{isChecked?'is_checked':'normal'}}"

This is a ternary operator, when isChecked==true, Add the is_checked style to the class, and use the normal style when it is flase. The implementation of this is similar to the syntax of PHP controlling style class names.

The above is the detailed content of Code example for modifying style by clicking on the control of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!