vue触底,触顶事件

 data(){
  return{
  
    songList: [], //歌单列表
    totalPage: "",
    total: "",
    pageSize: 10,
    thisTotalPage: "",
    pageNumber: 1

}
},    

  

methods: { 
    
//添加歌单
    addSongList: async function(item, path, trackListIds) {
      console.log(item);
      let params = {};
      const res = await http.post(
        api.addSongList + item.deviceSongListId + path + this.trackId,
        params
      );
      if (res.data.statusCode == 0) {
        this.pageSize = this.pageNumber * 10;
        // 保存最开始的总页数
        if (this.thisTotalPage == "") {
          this.thisTotalPage = this.totalPage;
        }
        this.inits(1);
        this.totalPage = this.thisTotalPage;
        Toast("添加成功");
      }
      this.listShow = false;
    },

  

    //初始化音频数据
    inits: async function(pageNumber) {
      let data = {
        pageNum: pageNumber,
        pageSize: this.pageSize
      };
      const res = await http.get(
        api.albumSongList +
          this.$route.query.trackListId +
          "/" +
          this.facilityId,
        data
      );
      if (res.data.statusCode == 0) {
        this.songList = res.data.data.list;
        // console.log(this.songList);
        this.totalPage = res.data.data.pages;
        this.total = res.data.data.total;
      }
      this.pageSize = 10;
    },

  


  //获取歌单 getSongList: async function() { this.pageNumber += 1; let data = { pageNum: this.pageNumber, pageSize: 10 }; const res = await http.get( api.albumSongList + this.$route.query.trackListId + "/" + this.facilityId, data ); // this.songList = res.data.data.list if (res.data.statusCode == 0) { this.totalPage = res.data.data.pages; this.total = res.data.data.total; // console.log(res.data.data.list); // this.songList = this.songList.concat(res.data.data.list); console.log(this.songList); for (let i = 0; i < res.data.data.list.length; i++) { this.songList.push(res.data.data.list[i]); } this.list = []; for (let i = 0; i < this.songList.length; i++) { this.list.push(i); } this.loading = false; } },

  

    //页面滚动到底之后会触发一次,
    onLoad() {
      this.loading = true;
      let self = this;
      // console.log(this.pageNumber)
      // console.log(this.thisTotalPage)
      if (this.thisTotalPage != "") {
        if (self.pageNumber < self.thisTotalPage) {
          // self.finished = true;
          setTimeout(() => {
            self.getSongList();
          }, 2000);
        } else {
          self.loading = false;
        }
      } else {
        if (self.pageNumber < self.totalPage) {
          // self.finished = true;
          setTimeout(() => {
            self.getSongList();
          }, 2000);
        } else {
          self.loading = false;
        }
      }
    },
}

  



created() { let _this = this; window.onscroll = function() { //变量scrollTop是滚动条滚动时,距离顶部的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度 var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条到底部的条件 if (scrollTop + windowHeight == scrollHeight) { //写后台加载数据的函数 _this.onLoad(); console.log( "距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight ); } }; }

  

原文地址:https://www.cnblogs.com/lan-cheng/p/10075616.html