在使用wx.createIntersectionObserver去监听长列表的时候,id是动态的,每次加载一页之后,渲染完了就去添加监听器,等到出现在视口之内,就加浏览量。但是有问题,下面是代码片段
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
appear: false,
list: [0]
},
onLoad() {
},
onReady(){
let that = this
// setTimeout(function(){
console.log(',.....'newDate().getTime())
that.setData({
list: [0,1,2]
},function(){
console.log(',.....1111111111111'newDate().getTime())
setTimeout(function(){
console.log(',.....22222222'newDate().getTime())
that._observer = wx.createIntersectionObserver(that)
that._observer
.relativeToViewport()
.observe('#1', (res) => {
console.log(res);
// that.setData({
// appear: res.intersectionRatio >
// })
})
},1100);
})
// },2000);
},
onUnload() {
if (this._observer) this._observer.disconnect()
}
})
//index.wxml
<viewclass="container">
<viewclass="page-body">
<viewclass="page-section message">
<text wx:if"{{appear}}">
小球出现
</text>
<text wx:else>
小球消失
</text>
</view>
<viewclass="page-section">
<scroll-view scroll-y >
<view wx:for"{{list}}" class="scroll-area"style"{{appear ? 'background: #ccc' : ''}}" id="{{index}}">
<textclass="notice">向下滚动让小球出现</text>
<viewclass="filling"></view>
<viewclass="ball"></view>
</view>
</scroll-view>
</view>
</view>
</view>
//index.wxss
.scroll-view {
height: 400rpx;
background: #fff;
border: px solid #ccc;
box-sizing: borderbox;
}
.scroll-area {
height: 1300rpx;
display: flex;
flex-direction: column;
align-items: center;
transition: .5s;
}
.notice {
margin-top: 150rpx;
}
.ball {
width: 200rpx;
height: 200rpx;
background: #AAD19;
borderradius: 50;
}
.filling {
height: 400rpx;
}
.message {
width: 100;
display: flex;
justify-content: center;
}
.message text {
font-size: 40rpx;
font-family: -apple-systemfont, Helvetica Neue,Helvetica,sans-serif;
}
麻烦提供能复现问题的代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html