Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to achieve multiple button toggle functions of WeChat Mini Programs". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

An example of WeChat Mini Programs realizing the toggle function of multiple buttons

Implement the button toggle function as shown in the following figure.

A lot of toggle on Baidu is set up with only one button, so I would like to sum up a little bit now: how to realize the toggle function of multiple buttons.

Principle:

1. When the list is displayed, we will use wx:for to loop the data, so we will get the corresponding current data (that is, wx:key= "index")

two。 Add a toggle attribute to each data, but toggle=false does not show

3. Set a click method to get the data in which the current button is located, then reverse the corresponding toggle, and then rewrite the modified data (this is where I made a mistake)

4. On the wxml page, determine that the value of toggle is true/false, and then modify the corresponding class name

Js Code:

Page ({data: {datas: []}, onLoad:function (options) {var that=this; API.my_ajax ('', function (res) {/ / Analog data call format / / console.log (res) set by mock.js; var listData=res.data; for (var itemositani)

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.