文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-09-15 09:11

关注

一、获取手机窗口数据

  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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯