微信小程序实现动态改变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 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
jQuery取id有.的值的方法
May 21 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
HTML的select控件美化
Mar 27 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
php中error与exception的区别及应用
2014/07/28 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
详细分析vue表单数据的绑定
2020/07/20 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
python正则分析nginx的访问日志
2017/01/17 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
AJax面试题
2014/11/25 面试题
总经理助理工作职责
2014/02/06 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
2014年党支部工作总结
2014/11/13 职场文书
布达拉宫导游词
2015/02/02 职场文书
质检员岗位职责
2015/02/03 职场文书
开学第一天的感想
2015/08/10 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android