【不是Bug】nvue 页面内使用 uni.createIntersectionObserver 报错

分类：uni-app

bug反馈不是bug

产品分类： 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

2021-01-28 13:56 负责人:无分享

2 个回复

DCloud_UNI_Anne

https://uniapp.dcloud.io/nvue-api?id=nvue-%e9%87%8c%e4%b8%8d%e6%94%af%e6%8c%81%e7%9a%84-uni-app-api

像素方舟_青阳 (作者)

补充一下规避方案

在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 页面里的组件节点进行一部分特定操作。
1. scrollToElement 将 list 的某个子节点滚动到当前视口
2. getComponentRect 获取某个组件的 bounding rect 布局信息
3. addRule 添加 font-face rule
4. getLayoutDirection0.20.0+ 获取某个组件的布局方向（rtl、lrt、inherit）

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

该问题目前已经被锁定, 无法添加新回复

【不是Bug】nvue 页面内使用 uni.createIntersectionObserver 报错

示例代码：

`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描述：

2 个回复

公告

相关问题

【不是Bug】nvue 页面内使用 uni.createIntersectionObserver 报错

示例代码： 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描述：

与内容相关的链接

2 个回复

公告

相关问题

示例代码：

`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

预期结果：

不报错

实际结果：

报错