微信小程序实现动态改变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 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 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配置php-fpm启动参数及配置详解
2013/11/04 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
python中的多重继承实例讲解
2014/09/28 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
我的网上商城创业计划书
2013/12/26 职场文书
给客户的道歉信
2014/01/13 职场文书
技术比武方案
2014/05/19 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
英文道歉信
2015/01/20 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
Python面向对象编程之类的概念
2021/11/01 Python