微信小程序实现动态改变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 相关文章推荐
JavaScript 原型学习总结
Oct 29 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
用js实现博客打赏功能
Oct 24 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
node版本管理工具n包使用教程详解
Nov 09 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常用ODBC函数集(详细)
2013/06/24 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
python编程嵌套函数实例代码
2018/02/11 Python
python获取代码运行时间的实例代码
2018/06/11 Python
Python中创建二维数组
2018/10/17 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python 伯努利分布详解
2020/02/25 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
个人自我评价分享
2013/12/20 职场文书
运动会解说词50字
2014/01/18 职场文书
电大本科自我鉴定
2014/02/05 职场文书
表演方阵解说词
2014/02/08 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
新闻发布会主持词
2014/03/28 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
关于召开会议的通知
2015/04/15 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android