uni-app nvue 页面内使用 uni.createIntersectionObserver 报错

uni-app nvue 页面内使用 uni.createIntersectionObserver 报错

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 macOS Big Sur 11.1
手机系统 iOS
手机系统版本号 IOS 14
手机厂商 苹果
手机机型 iPhone 12
页面类型 nvue
打包方式 云端
项目创建方式 CLI
CLI版本号 2.0.0-30720210122001

示例代码：

onReady() {  
    console.log('[pages/tabbar/home/index]:onReady')  
    observer = uni  
      .createIntersectionObserver(this, { thresholds: [0.95, 0.98, 1] })  
      .relativeToViewport({ top: -44 })  
      .observe('.u-sticky-wrap', res => {  
        console.log(res)  
      })  
}

操作步骤：

  • nvue 页面使用 uni.createIntersectionObserver

预期结果：

  • 不报错

实际结果：

  • 报错

bug描述： nvue 页面在App内使用 uni.createIntersectionObserver 报错 13:49:31.259 [ERROR] : TypeError: JSON.stringify cannot serialize cyclic structures. __ERROR


更多关于uni-app nvue 页面内使用 uni.createIntersectionObserver 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

https://uniapp.dcloud.io/nvue-api?id=nvue-里不支持的-uni-app-api

更多关于uni-app nvue 页面内使用 uni.createIntersectionObserver 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


补充一下规避方案

在nvue中用的是weex的一套，view 上有 appear 和 disappear事件可以观测是否进入视口 https://weex.apache.org/zh/docs/events/common-events.html#appear
nvue 中通过 weex.requireModule(‘dom’) 获取dom模块 https://weex.apache.org/zh/docs/modules/dom.html#dom

dom 模块用于对 weex 页面里的组件节点进行一部分特定操作。

scrollToElement 将 list 的某个子节点滚动到当前视口
getComponentRect 获取某个组件的 bounding rect 布局信息
addRule 添加 font-face rule
getLayoutDirection0.20.0+ 获取某个组件的布局方向（rtl、lrt、inherit）

const dom = weex.requireModule(‘dom’)
dom.getComponentRect(selector, ({ result, size }) => resolve(size))

回到顶部