源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-03-11 02:14 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法。分享给大家供大家参考,具体如下: [b]1、效果展示[/b] [img]http://files.jb51.net/file_images/article/201712/2017125153525760.gif?2017115153550[/img] [b]2、关键代码[/b] 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>

此处设置的[code]style="width:{{view.Width}}px;height:{{view.Height}}px;"[/code]可通过事件响应动态改变数值,进而改变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:类似前面文章[url=http://www.1sucai.cn/article/129725.htm]http://www.1sucai.cn/article/129725.htm[/url]介绍过的,可在事件处理函数中添加[code]console.log(e);[/code],在控制台中即可观察到是由[code]e.detail.value[/code]获取宽与高改变数值。 [b]3、源代码[/b]点击此处[url=http://xiazai.jb51.net/201712/yuanma/wx-height-width-codes(jb51.net).rar][b]本站下载[/b][/url]。 希望本文所述对大家微信小程序开发有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部