微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

微信小程序实现动态改变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、源代码点击此处本站下载

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转?
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序?它有哪些功能?
如何配置小程序开发项目结构?(教程)
怎么把自己的店加入小程序
微信小程序怎么实现购物车功能?(方法介绍)
小程序使用函数节流解决页面多次跳转问题
小程序中下拉刷新页面的功能怎么实现?
小程序生成参数二维码的方法介绍