博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue触底,触顶事件
阅读量:7045 次
发布时间:2019-06-28

本文共 3612 字,大约阅读时间需要 12 分钟。

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

你可能感兴趣的文章
练习10.9-2
查看>>
变化的区间树状数组,单点查询
查看>>
lastIndexOf方法——获取字符最后的索引
查看>>
一种文件捆绑型病毒研究
查看>>
二进制中1的个数
查看>>
opencv查找轮廓---cvFindContours && cvDrawCountours 用法及例子
查看>>
C# 之 服务端获取远程资源
查看>>
《大话操作系统——扎实project实践派》(8.2)(除了指令集.完)
查看>>
SAP 物料移动类型查询表
查看>>
Unity UGUI——Rect Transform包(Anchors)
查看>>
SNMP 实战1
查看>>
ZooKeeper概述(转)
查看>>
[nodejs] nodejs开发个人博客(一)准备工作
查看>>
Android仿微信界面--使用Fragment实现(慕课网笔记)
查看>>
泪奔在最后时刻
查看>>
vsearch 去除重复序列和singleton 序列
查看>>
Android——计算器第一次完善
查看>>
【DDD/CQRS/微服务架构案例】在Ubuntu 14.04.4 LTS中运行WeText项目的服务端
查看>>
第四节,Linux基础命令
查看>>
使用SignalR 提高B2C商城用户体验1
查看>>