Home WeChat Applet Mini Program Development WeChat applet realizes the position function of moving the view label by clicking the button

WeChat applet realizes the position function of moving the view label by clicking the button

Jun 23, 2018 pm 01:42 PM
Location WeChat applet button Click move

This article mainly introduces the WeChat applet to realize the position function of clicking the button to move the view label. It involves the related operation skills of WeChat applet event binding and this.setData to dynamically modify the data value and then change the view label style. Friends in need You can refer to the following

example of this article describing the WeChat applet to realize the position function of clicking the button to move the view label. Share it with everyone for your reference, the details are as follows:

1. Effect display

##2. Key code

index.wxml file

<view class="view" style="left:{{viewLeft}}px;">我是view标签</view>
<button class="btn" type="default" bindtap="changeLocation">点击我移动view标签的位置</button>
Copy after login

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%;
}
Copy after login

index.js file

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

The visible view component passes the

position of .view : absolute;Perform absolute position positioning. The logic layer responds to the click event and uses this.setData to dynamically change the viewLeft value in style="left:{{viewLeft}}px;" to achieve The function of moving the view label.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat applet development to implement custom Toast pop-up box

WeChat applet uses checkbox display Multiple selection box function [with source code]

The above is the detailed content of WeChat applet realizes the position function of moving the view label by clicking the button. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1668
14
PHP Tutorial
1273
29
C# Tutorial
1256
24
Details on how to turn on environment variable settings on Windows 11 Details on how to turn on environment variable settings on Windows 11 Dec 30, 2023 pm 06:07 PM

The environment variable function is an essential tool for running the configuration program in the system. However, in the latest win11 system, there are still many users who do not know how to set it up. Here is a detailed introduction to the location of the win11 environment variable opening. Come and join us. Learn to operate it. Where are the win11 environment variables: 1. First enter "win+R" to open the run box. 2. Then enter the command: controlsystem. 3. In the system information interface that opens, select "Advanced System Settings" from the left menu. 4. Then select the "Environment Variables" option at the bottom of the "System Properties" window that opens. 5. Finally, in the opened environment variables, you can make relevant settings according to your needs.

Win11 startup path and how to open it Win11 startup path and how to open it Jan 03, 2024 pm 11:13 PM

Every Windows system has a startup path. If you add files or software to it, it will be opened at boot time. However, many friends don’t know where the win11 startup path is. In fact, we only need to enter the corresponding folder on the C drive. Win11 startup path: 1. Double-click to open "This PC" 2. Directly paste the path "C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup" into the path box. 3. Here is the win11 startup path. If we want to open the file after booting, we can put the file in. 4. If you cannot enter according to this path, it may be hidden.

Xianyu WeChat mini program officially launched Xianyu WeChat mini program officially launched Feb 10, 2024 pm 10:39 PM

Xianyu's official WeChat mini program has quietly been launched. In the mini program, you can post private messages to communicate with buyers/sellers, view personal information and orders, search for items, etc. If you are curious about what the Xianyu WeChat mini program is called, take a look now. What is the name of the Xianyu WeChat applet? Answer: Xianyu, idle transactions, second-hand sales, valuations and recycling. 1. In the mini program, you can post idle messages, communicate with buyers/sellers via private messages, view personal information and orders, search for specified items, etc.; 2. On the mini program page, there are homepage, nearby, post idle, messages, and mine. 5 functions; 3. If you want to use it, you must activate WeChat payment before you can purchase it;

Can the appdata folder be moved to the D drive? Can the appdata folder be moved to the D drive? Feb 18, 2024 pm 01:20 PM

Can the appdata folder be moved to the D drive? With the increasing popularity of computer use, more and more users' personal data and applications are stored on the computer. In Windows operating system, there is a specific folder called appdata folder, which is used to store user's application data. Many users wonder whether this folder can be moved to the D drive or other disks for data management and security considerations. In this article, we will discuss this problem and provide some solutions. First, let me

Stop or allow this PC to access your mobile device on Windows 11 Stop or allow this PC to access your mobile device on Windows 11 Feb 19, 2024 am 11:45 AM

Microsoft changed the name of PhoneLink to MobileDevice in the latest Windows 11 version. This change allows users to control computer access to mobile devices through prompts. This article explains how to manage settings on your computer that allow or deny access from mobile devices. This feature allows you to configure your mobile device and connect it to your computer to send and receive text messages, control mobile applications, view contacts, make phone calls, view galleries, and more. Is it a good idea to connect your phone to your PC? Connecting your phone to your Windows PC is a convenient option, making it easy to transfer functions and media. This is useful for those who need to use their computer when their mobile device is unavailable

6000 mAh silicon negative battery! Xiaomi 15Pro upgrade leaked again 6000 mAh silicon negative battery! Xiaomi 15Pro upgrade leaked again Jul 24, 2024 pm 12:45 PM

According to news on July 23, blogger Digital Chat Station broke the news that the battery capacity of Xiaomi 15 Pro has been increased to 6000mAh and supports 90W wired flash charging. This will be the Pro model with the largest battery in Xiaomi’s digital series. Digital Chat Station previously revealed that the battery of Xiaomi 15Pro has ultra-high energy density and the silicon content is much higher than that of competing products. After silicon-based batteries are tested on a large scale in 2023, second-generation silicon anode batteries have been identified as the future development direction of the industry. This year will usher in the peak of direct competition. 1. The theoretical gram capacity of silicon can reach 4200mAh/g, which is more than 10 times the gram capacity of graphite (the theoretical gram capacity of graphite is 372mAh/g). For the negative electrode, the capacity when the lithium ion insertion amount reaches the maximum is the theoretical gram capacity, which means that under the same weight

Location of Origami Bird at Stardome Railway Crocker Film and Television Park Location of Origami Bird at Stardome Railway Crocker Film and Television Park Mar 27, 2024 pm 11:51 PM

There are a total of 20 origami birds in Croaker Film and Television Park on Star Dome Railway. Many players don’t know where the origami birds are in Crocker Film and Television Park. The editor has summarized the locations of each origami bird to help everyone. Search for it, and take a look at this latest summary of the locations of the origami birds in Croaker Film and Television Park for specific content. Guide to the Honkai Star Dome Railway: Origami Bird in Crook Movie Park Location 1, Crook Movie Park 1st Floor 2, and Crook Movie Park 2nd Floor Star Dome Railway

Why won't my laptop start up after pressing the power button? Why won't my laptop start up after pressing the power button? Mar 10, 2024 am 09:31 AM

There could be several reasons why your Windows laptop won't boot. Memory failure, dead battery, faulty power button, or hardware issues are all common causes. Here are some solutions to help you resolve this issue. Laptop won't turn on after pressing the power button If your Windows laptop still won't turn on after pressing the power button, here are some steps you can take to resolve the issue: Is your laptop fully charged? Perform a hard reset to clean your laptop Reseat the memory Transparent CMOS type battery Take your laptop for repair. 1] Is your laptop fully charged? The first thing to do is to check if your laptop is fully charged. Laptop won't start if battery is drained

See all articles