iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >小程序获取窗口宽高和dom元素
  • 641
分享到

小程序获取窗口宽高和dom元素

小程序微信小程序 2023-09-15 09:09:44 641人浏览 薄情痞子
摘要

一、获取手机窗口数据 wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度wx.getSystemIn

一、获取手机窗口数据

  1. wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度
  2. wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度
  3. wx.getSystemInfoSync().model // 获取当前采用的设备
  4. wx.getSystemInfoSync().pixelRatio
  5. wx.getSystemInfoSync().language // 获取当前所采用的的语言
  6. wx.getSystemInfoSync().version // 获取当前设备的版本

二、获取dom元素

var query = wx.createSelectorQuery();  // 创建节点选择器query.select('.list').boundingClientRect(res=>{    console.log(res)  // 获取class为list的节点});query.selectViewport().scrollOffset();query.exec((res) => {    var listHeight = res[0].height; // 获取list高度});// 注意:res[0]为当前节点的详细数据;res[1]为显示区域的竖直滚动位置;query.exec((res) => {})中的回调函数是最后执行的,若要获取高度等信息进行操作的话,要在回调函数中进行。

================================= 华丽的分割线 =============================

由于最近开发小程序遇到了相关dom操作的问题,所以在此做下详细介绍:

下面内容引自【传送门】

由于微信官方禁止小程序操作dom元素,因而无法像前端一样操作小程序DOM,好在官方提供了api

这个api叫做 wx.createSelectorQuery(),  官方定义:返回一个 SelectorQuery 对象实例。

这个api的select()方法用于查找元素,类似jq的元素选择器

然后有 boundinGClientRect(function(res){}) 则返回指定元素的DOM属性,res代表元素本身,(百度了 boundingClientRect :边界中心)

再之后的exec(function(rect){})则是设置元素属性,rect在这里指的是所有匹配到结果的集合,通过调用that/this.setdata({})可以更改元素dom值,请注意!rect是一个数组集合,想要设置某一个元素,需要给该数组加指定元素的下标!

看下面代码:

onReady: function () {    var that = this    const query = wx.createSelectorQuery();    query.select('.cont1').boundingClientRect(function (res) {//这里返回元素自身的DOM属性          console.log(res);    }).exec(function(rect){        that.setData({          swiperHeight: rect[0].height + 0        })        // rect返回一个数组,需要使用下标0才能找到        // console.log(s[0].height)    });  },

网上听大佬说偶尔会有rect返回为null的意外,昨晚翻遍百度,终于找到了一个解决方法,感谢那位大佬(传送门)

  setTimeout(function () {     var query = wx.createSelectorQuery();       query.select('.cont1').boundingClientRect();      query.exec(function (rect) {        if (rect  === null) return;       that.setData({          swiperHeight: rect .height + 10          })              });    }, 500) 

以上,有问题欢迎指出!

来源地址:https://blog.csdn.net/dave_hz/article/details/130280087

--结束END--

本文标题: 小程序获取窗口宽高和dom元素

本文链接: https://www.lsjlt.com/news/408382.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 小程序获取窗口宽高和dom元素
    一、获取手机窗口数据 wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度wx.getSystemIn...
    99+
    2023-09-15
    小程序 微信小程序
  • 如何在Vue中获取DOM元素的实际宽高
    目录前言一、获取元素二、获取元素宽高补充:vue项目获取dom元素宽高总是不准确总结前言 最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表...
    99+
    2024-04-02
  • 微信小程序动态获取元素宽度高度的方法
    本文小编为大家详细介绍“微信小程序动态获取元素宽度高度的方法”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序动态获取元素宽度高度的方法”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。首先,这个接口会返回一...
    99+
    2023-06-26
  • 小程序获取dom信息
    官方文档 SelectorQuery 应用 1、创建选择器 const query = wx.createSelectorQuery(); 将选择器的选取范围更改为自定义组件compo...
    99+
    2023-09-16
    小程序
  • 小程序如何获取页面元素
    在微信小程序中使用wx.createSelectorQuery()方法获取页面元素的样式,实现代码如下:wx.createSelectorQuery().select('元素id').boundingClientRect(function ...
    99+
    2024-04-02
  • 小程序如何获取图片宽高
    这篇文章给大家分享的是有关小程序如何获取图片宽高的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。  小程序如果不能获取图片宽高,那么图片设置宽高时,就有可能会出现图片变形,要想避免这种情况,除了图片等比例缩放,还可...
    99+
    2023-06-26
  • JavaScript如何获取当前窗口内的宽度和高度
    今天小编给大家分享一下JavaScript如何获取当前窗口内的宽度和高度的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Jav...
    99+
    2023-07-05
  • JavaScript获取当前窗口内的宽度和高度汇总
    目录JavaScript获取窗口宽高:Jquery如何获取屏幕、浏览器、页面的宽度和高度小编给大家分享一下JS与Jquery如何获取屏幕、浏览器、页面的宽度和高度的相关知识点,内容详...
    99+
    2023-02-20
    js获取窗口的宽高 jquery中获取当前窗口的宽度
  • 使用display:none时隐藏DOM元素无法获取实际宽高的解决方法
    案例说明 当DOM元素被添加上display:none;的样式时,这个元素和它的子元素无法获取到实际的宽高。如图,我设置了一个父元素和一个子元素,并且通过一个按钮切换父元素是否带有d...
    99+
    2024-04-02
  • Javascript DOM的简介,节点和获取元素详解
    目录DOM节点元素节点:文本节点:属性节点:获取元素getElementById()getElementsByTagName()getElementsByClassName()总结:...
    99+
    2024-04-02
  • 获取Java程序的窗口句柄
    在Java中,可以使用`java.awt.Window.getWindows()`方法获取当前所有窗口的实例,然后使用`java.a...
    99+
    2023-09-14
    java
  • Javascript中DOM、节点和获取元素的示例分析
    这篇文章给大家分享的是有关Javascript中DOM、节点和获取元素的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。DOM文档:DOM中的“D”,当创建一个网页并把它加载到Web浏览器中时,它把编写的网...
    99+
    2023-06-25
  • 微信小程序如何获取图片宽度与高度
    起源 最近在做A需求, 其中有个小功能点描述如下: 从配置端返回张图片, 期望宽度不变(750)、高度根据图片自适应. 我以为的 // 为便于讲解, 将css作为style属...
    99+
    2024-04-02
  • 微信小程序如何获取绑定事件元素的ID
    这篇文章将为大家详细讲解有关微信小程序如何获取绑定事件元素的ID ,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-x...
    99+
    2023-06-26
  • js如何解决无法获取隐藏元素宽度和高度的问题
    这篇文章给大家分享的是有关js如何解决无法获取隐藏元素宽度和高度的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元...
    99+
    2024-04-02
  • 小程序如何获取页面高度
    小程序获取页面高度的代码示例:onReady: function () {//动态获取高度this.autoHeight();},//动态获取高度autoHeight:function(){var t...
    99+
    2024-04-02
  • 怎么在微信小程序中获取图片的宽度与高度
    这篇文章给大家介绍怎么在微信小程序中获取图片的宽度与高度,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。重点: 在图片加载完成后获取对应的图片信息.经查小程序开发文档后发现, 有提供加载成功的回调, 如下:演示Demo如...
    99+
    2023-06-08
  • 小程序怎么获取到openid和session_key
    这篇文章主要介绍“小程序怎么获取到openid和session_key”,在日常操作中,相信很多人在小程序怎么获取到openid和session_key问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序怎么...
    99+
    2023-06-20
  • 微信小程序——获取接口调用凭据access_token
    问题背景 今天在搞一个微信小程序的时候,使用到了发布内容的问题,然后想使用微信请求接口,结果遇到了请求接口需要获取调用凭证access_token。 查看微信小程序开发文档 打开微信小程序开发文档后,打开服务端相关文档,如下图: 图中可以...
    99+
    2023-09-14
    微信小程序 小程序 微信
  • 如何动态获取小程序页面的高度
    使用onReady事件动态获取小程序页面的高度实现代码如下:onReady: function () {//动态获取高度this.autoHeight();},//动态获取高度autoHeight:functi...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作