Home > Web Front-end > JS Tutorial > body text

How to change the view label width and height in WeChat applet

亚连
Release: 2018-06-22 15:56:04
Original
2291 people have browsed it

This article mainly introduces the method of dynamically changing the width and height of the view label in the WeChat applet, involving WeChat applet event response and related implementation techniques of using setData to dynamically operate data data. Friends in need can refer to it

The example of this article describes the method of dynamically changing the width and height of the view label in the WeChat applet. Share it with everyone for your reference, the details are as follows:

Key code

index.wxml file

<view class="view" style="width:{{view.Width}}px;height:{{view.Height}}px;"
>我是view标签,我现在的宽度是{{view.Width}}px,高度是{{view.Height}}px</view>
<input placeholder="输入view标签的宽度" bindinput="viewWidth"></input>
<input placeholder="输入view标签的高度" bindinput="viewHeight"></input>
Copy after login

style= set here "width:{{view.Width}}px;height:{{view.Height}}px;"The value can be dynamically changed through event response, thereby changing the width and height styles of the view component.

index.js file

var pageData={}
pageData.data={
  view:{
    Width:100,
    Height:100
  }
}
pageData[&#39;viewWidth&#39;]=function(e){
console.log(e);
  this.setData({
    view:{
      Width:e.detail.value,
      Height:this.data.view.Height
    }
  })
}
pageData[&#39;viewHeight&#39;]=function(e){
  this.setData({
    view:{
      Width:this.data.view.Width, 
      Height:e.detail.value 
    }
  })
}
Page(pageData)
Copy after login

PS: Similar to what was introduced in the previous article //www.jb51.net/article/129725.htm, console can be added to the event processing function .log(e);, you can observe in the console that the changed values ​​of width and height are obtained by e.detail.value.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Error in loading path in laydate.js

Connect to any database through javascript

How to use fs.rename in node.js to implement forced renaming

An error occurs when loading the path in laydate.js

How to implement route parameter passing in vue-router

How to use jQuery to operate tables to achieve cell merging

How to achieve animation effects And callback function

The above is the detailed content of How to change the view label width and height in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!