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

  

vue触底,触顶事件的更多相关文章

  1. 一个简单的适用于Vue的下拉刷新,触底加载组件

    一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...

  2. JS实现滚动区域触底事件

    效果 贴上效果展示: 实现思路 样式方面不多赘述,滚动区域是给固定高度,设置 overflow-y: auto 来实现. 接下来看看js方面的实现,其实也很简单,触发的条件是: 可视高度 + 滚动距离 ...

  3. 前端 | 页面触底自动加载 Vue 组件

    不管是 web 端还是移动端,信息流都是现在很流行的信息展示方式.信息流经常搭配自动加载一起使用以获得更好的使用体验. 最近在使用 Vue 开发过程中也遇到了首页信息流自动加载的需求.大致了解了一下几 ...

  4. 微信小程序---scroll-view在苹果手机上触底或触顶页面闪动问题

    在项目开发中遇到一个关于scroll-view的的问题,具体如下: 项目要求是横向滚动,由于直接在scroll-view组件设置display:flex不生效,因此考虑直接在scroll-view下增 ...

  5. js滚动事件实现滚动触底加载

    移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断: 首先介绍jquery的写法,代码如下: $(window).scroll(function(){ var windowH=$ ...

  6. el-select实现下拉框触底加载更多

    当下拉框需要展示的数据有很多时,几千甚至上万条,一次性全部请求回来再按照特定格式比如 id-name 去处理数据的话,不论是从接口还是前端,这个性能都不是很好,会造成下拉框初次打开时响应很慢,影响用户 ...

  7. PC端触底效果反复触发的解决方案

    最近在做一个PC端的项目,要求是在滑动到页面的底部的时候就动态的加载下一页的数据,代码实现思路如下: 首先,我们需要知道浏览器中有三个高度,分别是屏幕高度(outerHeight),文档容器高度(in ...

  8. 小程序上拉触底&下拉加载

    data: { pageNo: 1,//当前页 pageSize: 10,//每页条数 count:'',//总条数 orderList: [], }, onLoad: function () { v ...

  9. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

随机推荐

  1. mysql 数据操作 单表查询 where 约束 目录

    mysql 数据操作 单表查询 where约束 between and or mysql 数据操作 单表查询 where约束 is null in mysql 数据操作 单表查询 where约束 li ...

  2. 接口传值实例DatePickerDialog

    1.第一步创建class,类名自己取,这里我使用DatePickerFragment1 import android.app.DatePickerDialog; import android.app. ...

  3. Linux下Rsync+Inotify-tools实现数据实时同步

    Linux下Rsync+Inotify-tools实现数据实时同步 注意:下面的三个案例都是rsync 每次都是全量的同步(这就坑爹了),而且 file列表是循环形式触发rsync ,等于有10个文件 ...

  4. MVC和观察者模式

    用观察者模式实现MVC框架! http://wenku.baidu.com/view/eff8bab069dc5022aaea0007.html 写的不错! Observer和ConcreteObse ...

  5. thinkphp处理jQuery EasyUI form表单问题

    jQuery EasyUI form表单不是ajax方式提交,而是在提交的时候新建一个隐藏的iframe并在iframe里面创建一个与绑定表单一样的表单,然后在iframe里面进行同步提交而不是异步提 ...

  6. How To Mine Bitcoins 比特币挖矿

    linux 下查看 gpu 的信息: sudo lshw -C display windows下查看cuda信息:In directory C:\Program Files\NVIDIA Corpor ...

  7. PHP对象转数组

    Solution json_decode( json_encode( $obj ), true ): But why?You should have a look at the function na ...

  8. 3.9 Templates -- Input Helpers

    一.Input Helpers Ember中{{input}}和{{textarea}}是创建常规表单控件最简单的方法. {{input}}包裹内建的Ember.TextField和Ember.Che ...

  9. samba创建权限(复制)

    1.今天发现用samba挂载开发过程中,发现别人的权限和我的经常不一致,导致提交git的时候都被提交了,心想应该有哪里有一个统一设置的可以设置用户的默认权限,后来百度之后找到下面的文章,以后创建文件和 ...

  10. vue版本,小Toast

    <div id="message" :class="{'show':show_Message}"><p v-html="messag ...