小程序

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)
},