How does WeChat Mini Programs realize the location function of moving view tags by clicking a button?

This article mainly explains "WeChat Mini Programs how to click the button to move the view tag location 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 how to click the button to move the view tag location function" bar!

1. Effect display

2. Key code

Index.wxml file

I am the view tag. Click on the location where I moved the view tag.

Index.wxss file:

.view {position: absolute; background: green; color: white; width: 40%; height: 50px; line-height: 50px; text-align: center;} .btn {position: absolute; top:100px; width: 80%; left: 10%;}

Index.js file

Page ({data: {viewLeft:0}, changeLocation () {var viewLeft=this.data.viewLeft; viewLeft+=5; this.setData ({viewLeft:viewLeft})})

It can be seen that the view component is positioned absolutely through the position: absolute; of .view. The logic layer responds to the click event and uses this.setData to dynamically change the viewLeft value in order to realize the function of moving view tags.

At this point, I believe you have a deeper understanding of "WeChat Mini Programs how to click the button to move the view tag location function", 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!