本文主要介绍微信小程序实现动态改变view标签宽度和高度的方法,涉及微信小程序事件响应及使用setdata针对data数据动态操作相关实现技巧,希望能帮助到大家。
1、效果展示
2、关键代码
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>
此处设置的style="width:{{view.width}}px;height:{{view.height}}px;"可通过事件响应动态改变数值，进而改变view组件的宽高样式。
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)
以上内容就是微信小程序实现动态改变view标签宽度和高度的方法，希望能帮助到大家。
相关推荐：
微信小程序中关于movable-view移动图片与双指缩放的实例详解
jquery使用uploadview如何实现图片预览上传功能的实例
浅谈view组件实例详解
以上就是微信小程序实现动态改变view标签宽度和高度的方法的详细内容。