微信小程序中如何实现动态改变view标签宽度和高度

本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法。分享给大家供大家参考，具体如下：

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)

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

微信小程序中使用ECharts 异步加载数据的方法

关于微信小程序的动态传参

微信小程序实现点击按钮修改字体颜色的功能

以上就是微信小程序中如何实现动态改变view标签宽度和高度的详细内容，更多内容请关注技术你好其它相关文章！