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

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>

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['viewWidth']=function(e){
console.log(e);
  this.setData({
    view:{
      Width:e.detail.value,
      Height:this.data.view.Height
    }
  })
}
pageData['viewHeight']=function(e){
  this.setData({
    view:{
      Width:this.data.view.Width, 
      Height:e.detail.value 
    }
  })
}
Page(pageData)

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!