How to dynamically change the width and height of view labels using WeChat applet

This article mainly introduces the method of WeChat applet to dynamically change the width and height of view labels, involving WeChat applet event response and related implementation techniques of using setData to dynamically operate data data. I hope it can help everyone.

1. Effect display

##2. 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="width:{{view.Width}}px;height:{{view.Height}} set here 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)

The above content is the method of dynamically changing the width and height of the view label in the WeChat applet. I hope it can help everyone.

Related recommendations:

Detailed explanation of examples of movable-view moving pictures and two-finger zoom in WeChat applet

jQuery uses uploadView An example of how to implement the image preview and upload function

A brief discussion on the detailed explanation of View component examples

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