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

      

  • 相关阅读:
    LUA之面向对象
    LUA笔记之表
    LUA笔记之字符串
    STM32模拟I2C
    php(1)-php5.6启动命令
    ip地址变更对tomcat和nginx的影响
    解决 nginx: [alert] kill(189, 1) failed (3: No such process)
    linux(16)-yum安装提示“没有可用软件包”
    性能测试监控分析(17) 负载和CPU使用率低高负载的原因
    Codeforces Round #588 (Div. 2)C(思维,暴力)
  • 原文地址:https://www.cnblogs.com/lan-cheng/p/10075616.html
Copyright © 2020-2023  润新知