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

更新时间：2017年12月05日 15:22:58 作者：FutrueJet

这篇文章主要介绍了微信小程序实现动态改变view标签宽度和高度的方法,涉及微信小程序事件响应及使用setData针对data数据动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了微信小程序实现动态改变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)

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

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

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

您可能感兴趣的文章:

CSS图片响应式垂直水平居中
这篇文章主要为大家介绍CSS图片响应式垂直水平居中，在最近的项目中经常遇到这样的需求，于是把相关内容整理一下，分享给大家，需要的朋友可以来参考下
2015-08-08
JS中常用的消息框总结
小编给大家总结了JS最常用到的几种消息提示框，大家应该经常用的到，一起学习下吧。
2018-02-02
Axios取消重复请求的方法实例详解
在开发中,经常会遇到接口重复请求导致的各种问题,这篇文章主要给大家介绍了关于Axios取消重复请求的相关资料,需要的朋友可以参考下
2021-06-06
JavaScript中this的学习笔记及用法整理
在本篇文章里小编给大家整理的是关于JavaScript中this的使用以及代码实例，需要的朋友们学习下。
2020-02-02
js获取标签元素data-*属性值的4种方法
这篇文章主要分享了js获取标签元素data-*属性值的4种方法，标签上有两个属性data-id 和 data-user-name, 需要通过js去获取，下面文章具体介绍需要的小伙伴可以参考一下
2022-06-06
js 判断数据类型的几种方法
本文主要介绍了Js中数据类型判断的几种方法。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
微信小程序学习之wxs使用教程
这篇文章主要给大家介绍了关于微信小程序学习之wxs使用教程的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
关于跨站脚本攻击问题
这个问题我的理解是只要让其他网站能执行我的脚本我就有可能危害到，这个网站的用户安全
2011-12-12
JavaScript类的继承操作实例总结
这篇文章主要介绍了JavaScript类的继承操作,结合实例形式总结分析了JavaScript面向对象程序设计中类的继承常见实现方式与操作技巧,需要的朋友可以参考下
2018-12-12
全面解析Bootstrap手风琴效果
这篇文章主要为大家详细介绍了全面解析Bootstrap手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-12-12