Comment modifier la largeur et la hauteur de l'étiquette de vue dans l'applet WeChat

Cet article présente principalement la méthode de l'applet WeChat pour modifier dynamiquement la largeur et la hauteur des étiquettes de vue, impliquant la réponse aux événements de l'applet WeChat et les techniques de mise en œuvre associées consistant à utiliser setData pour exploiter dynamiquement les données. Les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit la méthode de modification dynamique de la largeur et de la hauteur de l'étiquette de vue dans l'applet WeChat. Partagez-le avec tout le monde pour votre référence, comme suit :

Code clé

fichier index.wxml

<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>

défini ici

Le la valeur peut être modifiée dynamiquement via une réponse à un événement, modifiant ainsi les styles de largeur et de hauteur du composant de vue. style="width:{{view.Width}}px;height:{{view.Height}}px;"

fichier index.js

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 : Semblable à ce qui a été introduit dans l'article précédent //www.jb51.net/article/129725.htm, vous pouvez ajouter , vous pouvez observer dans la console que les valeurs de changement de largeur et de hauteur sont obtenues par

. console.log(e);e.detail.valueCe qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Erreur dans le chemin de chargement dans laydate.js

Connectez n'importe quelle base de données via javascript

Comment utiliser fs.rename dans node.js pour implémenter le renommage forcé

Une erreur se produit lors du chargement du chemin dans laydate.js

Comment implémenter le passage des paramètres de route dans vue-router

Comment utiliser jQuery pour faire fonctionner des tables afin de réaliser la fusion de cellules

Comment pour obtenir des effets d'animation et une fonction de rappel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!