createselectorQuery和createIntersectionObserver在wepy的使用

今天药忘吃喽~ 2022-12-25 13:55 23阅读 0赞

问题： createIntersectionObserver使用报错

1. 小程序的AP地址：[小程序API地址][API]

2.这边说明文档说明：

![20201202110904188.png][]

在这里要说明this的问题了，在wepy中：**this 拿到是是 wepy 实例， this.$wx 才是小程序的实例**

所以在wepy中的使用应该是如下：

this.$wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
          res.intersectionRatio // 相交区域占目标节点的布局区域的比例
          res.intersectionRect // 相交区域
          res.intersectionRect.left // 相交区域的左边界坐标
          res.intersectionRect.top // 相交区域的上边界坐标
          res.intersectionRect.width // 相交区域的宽度
          res.intersectionRect.height // 相交区域的高度
        })

问题： 在子组件获取query相关信息不准确或者取不到

解决方法：

let query = wx.createSelectorQuery().in(this.$wx)
    let _this = this
    console.log(query.select)
    query.select('#move-box').boundingClientRect(function (rect) {
    console.log(rect)
    _this.maxWidth = rect.width
    console.log(_this.maxWidth)
    }).exec(res => {
    console.log(res)
    })

[API]: https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html
[20201202110904188.png]: /images/20221120/754f868846be49c08e4e41e5714d2754.png

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni.createSelectorQuery渲染后执行

每次使用createSelectorQuery时，因为和数据赋值一起调用，所以导致只能获取到上一次渲染的数据，如果能让这个函数在渲染之后调用，就可以完美解决了暂时不知

快来打我*/ 2023年06月27日 06:11/ 0 赞/ 0 阅读

相关 wepy的基本安装和使用

wepy的基本使用 1、WePY 简介和安装 001 - 什么是 `WePY` > `WePY` 是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模

分手后的思念是犯贱/ 2023年06月13日 08:56/ 0 赞/ 33 阅读

相关 createselectorQuery和createIntersectionObserver在wepy的使用

问题： createIntersectionObserver使用报错 1. 小程序的AP地址：[小程序API地址][API] 2.这边说明文档说明： ![20201202

今天药忘吃喽~/ 2022年12月25日 13:55/ 0 赞/ 24 阅读

相关 wepy

转自：http://www.cnblogs.com/erbingbing/p/7086212.html\3723909 小程序项目开发在时隔

快来打我*/ 2022年05月30日 01:42/ 0 赞/ 200 阅读

相关 wepy-store

wepy-store 适用于wepy框架的状态管理器。 [github地址][github] 为何要用状态管理器 1. 提供了一个状态管理机制，开发者在开发页

r囧r小猫/ 2022年05月25日 03:08/ 0 赞/ 215 阅读

相关 wepy项目创建和打包

创建项目 1.全局安装 npm install @wepy/cli -g 2.新建项目目录，生成Demo开发项目 wepy init standard myp

「爱情、让人受尽委屈。」/ 2022年04月17日 07:10/ 0 赞/ 340 阅读

相关小程序开发框架WePY和mpvue使用感受

今天想和小伙伴聊聊小程序开发框架的问题。种种原因，去年年末接触到了小程序，使用mpvue做了两个项目，也使用WePY做了一个项目，关于这两个框架的恩恩怨怨，我觉得我有资格

Love The Way You Lie/ 2022年03月10日 12:12/ 0 赞/ 522 阅读

相关 wepy框架滑动组件使用

![在这里插入图片描述][20190514094617530.png] [https://github.com/dlhandsome/wepy-com-swiper][ht

- 日理万妓/ 2021年09月19日 10:36/ 0 赞/ 251 阅读

相关 van-picker在wepy多级联动

<van-picker columns="{{columns}}" @change="onChange"></van-picker> data = {

╰+哭是因爲堅強的太久メ/ 2021年09月14日 02:20/ 0 赞/ 453 阅读

相关 van-popup在wepy的显示与隐藏

<van-popup wx:if="{{show}}" show="{{ show }}" position="bottom" @close="closeClick">

野性酷女/ 2021年09月12日 05:18/ 0 赞/ 471 阅读