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

前端之家收集整理的这篇文章主要介绍了微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1、效果展示

2、关键代码

index.wxml文件

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

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

index.js文件

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

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

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

猜你在找的微信小程序相关文章