Shulou(Shulou.com)06/01 Report--

This article mainly explains "WeChat Mini Programs click to achieve the method of style switching function", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "WeChat Mini Programs click to achieve style switching function" bar!

Ordinary web developers can get the Dom structure of HTML through JavaScript, but Mini Program can't. Mini Program achieves this function by data binding + data- to change the tag class name.

Step 1 gives the selected flag {{}} & data-num

Only one class name is bound here, or N class names can be bound.

Class='class1 class2 {{num==1? "active": ""}'9 gasoline 9 gasoline gasoline binding an event can be bound to the outside block, or to each view inside, as follows:

The only difference between 9% gasoline and 9% gasoline is that the e passed into the event is different. The e of the event bound to the outside block, only target will have the value of dataset. The e bound to each small block of events, whether target or currentTarget, has the value of dataset.

E.target.dataset.num step 2 write the initial value

Which one is selected at the beginning, which value of the variable is determined.

Data: {num:1}, step 3 write event handler function

The principle of changeOil:function (e) {console.log (e); this.setData ({num:e.target.dataset.num})} is to change the value of the variable num used to judge.

What others do:

The name of the class I use is active, and some people will use cur. [shorthand for current] someone even summed up three ways:

1. By changing the class name 2. Add a class name that overrides the previous style 3. Modify the inline style to overwrite the previous style the second way is the same as mine, the third way is best not to use, after all, we have to make a good Mini Program. So far, complete.

At this point, I believe that everyone on the "WeChat Mini Programs click to achieve style switching function" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.