vue触底，触顶事件

Posted 2021-01-25 lan-cheng

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