Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

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

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

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!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report