小程序和网站中无限滚动的实现

小程序

1.微信开发者工具

页面上拉触底事件的处理函数

onReachBottom: function () {
    //return
    
    // page+1 处理

    // this.setData 修改 为了 触发虚拟dom对比，进而更新页面的效果
  
    // this.data.page++;
    // console.log(this.data.datalist.length,this.total)
    if(this.data.datalist.length === parseInt(this.total)){
      return;
    }
    console.log("到底了")
    this.page++
    wx.request({
      url: `http://localhost:3000/goods?_page=${this.page}&_limit=8`,
      success:(res)=>{
        console.log(res.data)
        this.setData({
          datalist:[...this.data.datalist,...res.data]
        })
      }
    })
  },

2.uniapp

uniapp-scroll-view

<scroll-view class="info-box" scroll-y="true" scroll-with-animation="true" @scrolltolower="upToBottom">
	......
</scroll-view>

网站

methods: {
	upToBottom () {
      var DOM = document.documentElement || document.body
      var contentHeight = DOM.scrollHeight // 内容高度
      var scrollTop = DOM.scrollTop // 滚动高度
      var viewHeight = DOM.clientHeight
      if (scrollTop / (contentHeight - viewHeight) === 1) {
        // 到达底部10px时,加载新内容
        console.log('滚动条到底部')
      }
    }
},
mounted () {
    window.addEventListener('scroll', this.upToBottom, false)
},
beforeDestroy () {
  window.removeEventListener('scroll', this.upToBottom)
},