微信小程序监听不是page中的数据
时间: 2024-02-11 16:04:16 浏览: 220
微信小程序可以通过 `this.setData()` 方法监听 `Page` 中的数据变化,但如果需要监听非 `Page` 中的数据变化,可以使用 `wx.createIntersectionObserver()` 方法创建一个交叉观察器对象,从而监听指定组件的变化。
具体步骤如下:
1. 在 `Page` 中定义需要监听的数据,例如:
```js
Page({
data: {
scrollTop: 0
},
// ...
})
```
2. 在 `wxml` 文件中,使用 `scroll-view` 组件,并绑定 `scroll` 事件:
```html
<scroll-view scroll-y="true" scroll-top="{{scrollTop}}" bindscroll="onScrollViewScroll">
<!-- ... -->
</scroll-view>
```
3. 在 `js` 文件中,使用 `wx.createIntersectionObserver()` 方法创建一个交叉观察器对象,并调用 `observe` 方法监听指定组件的变化:
```js
Page({
data: {
scrollTop: 0
},
onScrollViewScroll: function (event) {
wx.createIntersectionObserver(this)
.relativeToViewport({ top: 0 })
.observe('.scroll-view', (res) => {
if (res.intersectionRatio > 0) {
console.log('scroll-view is in the viewport')
this.setData({
scrollTop: event.detail.scrollTop
})
}
})
}
})
```
在 `observe` 方法中,第一个参数为需要监听的组件的选择器,第二个参数为变化的回调函数。
当 `scroll-view` 组件出现在视口中时,即 `intersectionRatio > 0` 时,将会触发回调函数,从而更新 `scrollTop` 数据。
阅读全文