vue 触底加载 上滑刷新 vue加载更多_小侯哥哥的博客_vue触底刷新

export default {
    components:{
        FenLeiTab,
        Search
    },
    data() {
        return {
            goods_list:[],
            isLoading:false,//是否正在加载  
            isLoadingMsg:"拼命加载中......",

        }
    },
    created() {
       this.getgoodSeachData() //初次渲染页面
       this.bindScroll() //首次调用
    },
    destroyed() {
        this.clearScroll()  //页面销毁之前 清除scroll事件
    },
    methods: {
        // 绑定scroll事件
    bindScroll(){
      window.addEventListener("scroll",this.scrollHande)
    },
    // 清除scroll事件
    clearScroll(){
      window.removeEventListener("scroll",this.scrollHande)
    },
     // 滚动的回调函数
    scrollHande(){
      // scroll和input滑动等都是高频率触发事件，所以在写这些事件的时候 尽量加上防抖和节流
      if(this.isLoading) return // 正在加载的时候，如果滚动时候不请求新数据
      var B = document.documentElement.scrollHeight //获取html内容的高度
      var H = window.innerHeight //获取窗口的高度
      var S = document.body.scrollTop ||document.documentElement.scrollTop //滚出去的高度

      if(B-H-S<60){
        // 快触底了 请求新数据
        this.getgoodSeachData()
      }

    },
       // 请求页面数据
        getgoodSeachData(){
            this.page++ //请求一次page+1  请求下一页数据
            this.isLoading = true // 为true不在请求数据
//goodSeachData 是封装的请求方法            goodSeachData({cid:this.$route.params.id,pagenum:this.page,pagesize:5,}).then(data=>{
                this.isLoading = false
                  if(data.message.goods.length){ //判断data是否存在数据 
                    this.goods_list.push(...data.message.goods)
                }else{
                    this.isLoadingMsg="我是有底线的~~~" 
                }
                        
                })
            },
        },
   
}
export default {
    components:{