createIntersectionObserver在动态id选择器的时候,监听不了?
发布于 5 年前 作者 yejuan 5202 次浏览 来自 问答

在使用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;
}

回到顶部