介绍
这篇文章给大家分享的是有关小程序中实现动态改变视图标签宽度和高度的示例的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
具体如下:
<强> 1,效果展示强>
<强> 2,关键代码强>
索引。wxml文件
& lt; view 类=暗髡?风格=翱矶?{{view.Width}} px;高度:{{view.Height}} px;“ 在我是视图标签,我现在的宽度是{{view.Width}} px,高度是{{view.Height}} px & lt; input 占位符=笆淙胧油急昵┑目矶取?bindinput=皏iewWidth"祝辞& lt;/input> & lt; input 占位符=笆淙胧油急昵┑母叨取?bindinput=皏iewHeight"祝辞& lt;/input>
此处设置的<代码>风格=翱矶?{{view.Width}} px;高度:{{view.Height}} px;“> 代码可通过事件响应动态改变数值,进而改变视图组件的宽高样式。
索引。js文件
var pageData=https://www.yisu.com/zixun/{} pageData.data={ 观点:{ 宽度:100年, 身高:100 } } pageData [' viewWidth ']=函数(e) { console.log (e); this.setData ({ 观点:{ 宽度:e.detail.value, 高度:this.data.view.Height } }) } pageData [' viewHeight ']=函数(e) { this.setData ({ 观点:{ 宽度:this.data.view.Width, 高度:e.detail.value } }) } 页面(pageData)
感谢各位的阅读!关于小程序中实现动态改变视图标签宽度和高度的示例就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!