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


Posted in Javascript onDecember 05, 2017

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

1、效果展示

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

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://3water.com/article/129725.htm介绍过的,可在事件处理函数中添加console.log(e);,在控制台中即可观察到是由e.detail.value获取宽与高改变数值。

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

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

Javascript 相关文章推荐
JScript的条件编译
May 29 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
JS出现失效的情况总结
Jan 20 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
vue+iview写个弹框的示例代码
Dec 05 #Javascript
Node.js创建Web、TCP服务器
Dec 05 #Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 #Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 #jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 #jQuery
最实用的JS数组函数整理
Dec 05 #Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 #Javascript
You might like
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
Laravel5中contracts详解
2015/03/02 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
javascript实现的动态文字变换
2007/07/28 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
js选项卡的制作方法
2017/01/23 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
简单了解python变量的作用域
2019/07/30 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
Python容器类型公共方法总结
2020/08/19 Python
介绍一下Python下range()函数的用法
2013/11/07 面试题
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
打架检讨书800字
2014/01/10 职场文书
学校大课间活动方案
2014/01/30 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
高一新生军训感言
2014/03/02 职场文书
yy司仪主持词
2014/03/22 职场文书
医师定期考核实施方案
2014/05/07 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
解决vue中provide inject的响应式监听
2022/04/19 Vue.js