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

The knowledge points of this article "how to achieve event interaction in WeChat Mini Programs" are not quite understood by most people, so the editor summarizes the following, with detailed contents and clear steps, which can be used for reference. I hope you can get something after reading this article. Let's take a look at this "how to achieve event interaction in WeChat Mini Programs" article.

What is an event?

Refers to click, touch, press, slide, release, and so on a series of operations on the phone screen.

The effect of the following code is to give each of the two buttons an ID and then click on who, the information displayed above shows who clicked, how many times it clicked, how many times it is not separated, the number of times is the sum of the two clicks. The other code below is separate and separate.

1. Set the click event in index.wxml (the comment section needs to be deleted during the test)

/ / display the information here after clicking to indicate that there is a click event {{clickMsg}} / / set click event button 1 button 2

two。 Set the style of view in index.wxss

.page {text-align: center;}. View-item {background-color:green;width: 60px _ height: 30px _ margin: 30px auto 0 auto;color: navajowhite;border-radius: 10px _ padding: 20px;}

3. Set the response to a click event in index.js

/ / register the two variables var id;var count = 0bot var param = {data: {clickMsg: 'display click content'}, / / function is the function that triggers the click event, and then you can write the click event. / / e is the event event object, which contains a lot of things, such as who was clicked and when it was clicked clickMe: click (e) {count++; console.log (e) / / print the click event details to the debugged console id = e.currentTarget.id; / / get the id param.data.clickMsg of the clicked button = 'Show who: + id +' clicks'+ count; / / refresh the display of clickMsg. To see the message changes, you must write this this.setData (param.data);}}; Page (param) / / this must be written, it is to make the param function real, otherwise you will write, when called in index.wxml, there will be no response.

How to make the click control view0 carry private information?

In order to pass on the value or something in the future.

Click on my view0

How to invoke the private information of the control?

Var param= {clickMe:function (e) {id=e.currentTarget.id; console.log (e.currentTarget.id.dataset.siyou);}}; Page (param)

Second, add the click event of judgment

Index.wxml

{{Message}} {{Message1}} button 1 button 2

Index.js

Var id;var count1 = 0posivar count2 = 0polivar param = {data: {Message: 'display information here after click', Message1: 'display information here after click'}, clickMe: function (e) {console.log (e); id = e.currentTarget.id; if (id = = 'view1') {count1++; param.data.Message =' show'+ id + 'click' + count1+ 'times' This.setData (param.data);} else if (id = = 'view2') {count2++; param.data.Message1 =' show clicked'+ id + 'clicked' + count2+ 'times'; this.setData (param.data);}; Page (param) The above is about the content of this article on "how to achieve event interaction in WeChat Mini Programs". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.