微信小程序——获取元素的宽高等属性
微信小程序里面无法像用jquery一样获取到元素的节点。小程序提供了一个wx.createSelectorQuery()来获取元素的相关信息。官方的文档对于它的用法都已经写的很详细了。
我直接上在项目中使用的代码吧~
先交待一下我的项目需求,看下图:
获取那块高度的原理很简单,就是页面的整体高度减去1,2,3的高度。
看下页面结构:
js具体代码如下:
Page({ /**
* 页面的初始数据
*/
data: {
tabContHeight:300,
}, //计算高度
getRect: function () {
var _this = this;
//我这里需要获取多个元素的高度,所以用的是selectAll
wx.createSelectorQuery().selectAll('.page-content, .video-box, .play-note, .tab-nav').boundingClientRect().exec(function(res){
_this.setData({
tabContHeight: res[0][0].height - res[0][1].height - res[0][2].height - res[0][3].height
})
})
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
//调用 计算高度 的方法
this.getRect();
}
})
注意:需要把page和.page-content的height设置为100%,这样你返回的.page-content的高度才是你页面的整个高度。
我们要怎么获取其它的元素属性呢?我们可以先看一下js里面的res返回了一些什么数据,如下图所示:
所以如果我们要获取第2个元素的width,就通过 res[0][1].width就能得到啦~~
微信小程序——获取元素的宽高等属性的更多相关文章
- 微信小程序-获取经纬度
微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...
- 微信小程序-获取当前城市位置及再次授权地理位置
微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...
- 微信小程序获取Access_token和页面URL生成小程序码或二维码
1.微信小程序获取Access_token: access_token具体时效看官方文档. using System; using System.Collections.Generic; using ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- C# 微信小程序获取openid sessionkey
项目介绍 1.微信小程序获取openid和session_key 2.后台使用C#开发 项目流程 准备工作 1 获取appid 1.1 下载微信web开发工具 https://developers.w ...
- JavaScript和微信小程序获取IP地址的方法
最近公司新加了一个需求,根据用户登录的IP地址判断是否重复登录,重复登录就进行逼退,那么怎么获取到浏览器的IP地址呢?最后发现搜狐提供了一个JS接口,可以通过它获取到客户端的IP. 接口地址如下: h ...
- 微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
- .Net之微信小程序获取用户UnionID
前言: 在实际项目开发中我们经常会遇到账号统一的问题,如何在不同端或者是不同的登录方式下保证同一个会员或者用户账号唯一(便于用户信息的管理).这段时间就有一个这样的需求,之前有个客户做了一个微信小程序 ...
- 微信小程序获取手机号码看这篇文章就够了
前言 微信小程序获取手机号码,从官方文档到其他博主的文档 零零散散的 (我就是这样看过来 没有一篇满意的 也许是我搜索姿势不对) 依旧是前人栽树 后人乘凉 系列.保证看完 就可以实现获取手机号码功能 ...
随机推荐
- activiti排他网关
/*启动流程实例*可以在启动流程时把所有流程变量设置好*/@Test public void startProcessInstance(){ //流程定义key String processDefin ...
- 关于 sql server 数据库权限乱七八糟的一些东西
研究权限这些东西主要是因为今天正好在折腾数据库备份相关的东西,备份好说,备份完了就完了. 但是恢复备份的时候,需要先让数据库脱机,然后恢复,然后再联机,嗯,问题就出在联机上了. 根据 MSDN 的说法 ...
- ES2017 中的 Async 和 Await
ES2017 在 6 月最终敲定了,随之而来的是广泛的支持了我最喜欢的最喜欢的JavaScript功能: async(异步) 函数.如果你也曾为异步 Javascript 而头疼,那么这个就是为你设计 ...
- java park unpark
https://blogs.oracle.com/dave/a-race-in-locksupport-park-arising-from-weak-memory-models https://blo ...
- 破解AI大脑黑盒迈出新一步!谷歌现在更懂机器,还开源了研究工具
https://zhuanlan.zhihu.com/p/34306323 https://distill.pub/2018/building-blocks/
- SVN四部曲之SVN设置详解深入
想知道不同的设置是干什么用的,你只需将鼠标指针在编辑框/选项框上停留一秒钟...一个帮助提示气泡就会弹出来. 常规设置 图 4.68. 设置对话框,常规设置页面 这个对话框允许你指定自己喜欢的语言,同 ...
- hi模板文件报乱码问题
1.h5模板在: Templates\common 2.出现乱码的都在Templates\common\tags 局部视图里. 3.页面顶部有引用(skin-Common_SubmmitCartPr ...
- XShell 技巧
说明: 很长时间了,一直用XShell,但是总是用鼠标操作,后来想用其他方式代替鼠标,一想肯定有快捷方式等,这里就先记下一遍有用的博文,转自: http://sundful.iteye.com/blo ...
- Specular Aliasing与Specular Leaking
最近做高质量实时HDR PBR渲染中碰到了2个关键问题,若干思考如下: 问题1: 极高的动态范围HDR+高级BRDF+相对较低的采样率(比方说不考虑子像素的原始分辨率),在这3项因素的综合作用下,Sp ...
- Asp.Net微信支付接口之jsApiPay教程
1.微信支付JsApiPay只能在微信浏览器中使用 2.必须先申请微信支付功能 3.设置域名 4.设置支付授权目录 一定要精确到最后一级目录 5.获取APPID和AppSecret AppSecr ...