微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】

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

1、效果展示

2、关键代码

index.wxml文件

rush:xml;"> 我是view标签,我现在的宽度是{{view.Width}}px,高度是{{view.Height}}px 标签的宽度" bindinput="viewWidth"> 标签的高度" bindinput="viewHeight">

此处设置的style="width:{{view.Width}}px;height:{{view.Height}}px;"可通过事件响应动态改变数值,进而改变view组件的宽高样式。

index.js文件

rush: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:类似前面文章介绍过的,可在事件处理函数中添加console.log(e);,在控制台中即可观察到是由e.detail.value获取宽与高改变数值。

3、源代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

相关文章

开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转?
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序?它有哪些功能?
如何配置小程序开发项目结构?(教程)
怎么把自己的店加入小程序