Home  >  Article  >  WeChat Applet  >  Code example for modifying style by clicking on the control of WeChat applet

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

黄舟
黄舟Original
2017-09-13 10:42:042956browse

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?&#39;is_checked&#39;:&#39;normal&#39;}}"

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn