vue触底,触顶事件
data(){
return{
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触底,触顶事件的更多相关文章
- 一个简单的适用于Vue的下拉刷新,触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
- JS实现滚动区域触底事件
效果 贴上效果展示: 实现思路 样式方面不多赘述,滚动区域是给固定高度,设置 overflow-y: auto 来实现. 接下来看看js方面的实现,其实也很简单,触发的条件是: 可视高度 + 滚动距离 ...
- 前端 | 页面触底自动加载 Vue 组件
不管是 web 端还是移动端,信息流都是现在很流行的信息展示方式.信息流经常搭配自动加载一起使用以获得更好的使用体验. 最近在使用 Vue 开发过程中也遇到了首页信息流自动加载的需求.大致了解了一下几 ...
- 微信小程序---scroll-view在苹果手机上触底或触顶页面闪动问题
在项目开发中遇到一个关于scroll-view的的问题,具体如下: 项目要求是横向滚动,由于直接在scroll-view组件设置display:flex不生效,因此考虑直接在scroll-view下增 ...
- js滚动事件实现滚动触底加载
移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断: 首先介绍jquery的写法,代码如下: $(window).scroll(function(){ var windowH=$ ...
- el-select实现下拉框触底加载更多
当下拉框需要展示的数据有很多时,几千甚至上万条,一次性全部请求回来再按照特定格式比如 id-name 去处理数据的话,不论是从接口还是前端,这个性能都不是很好,会造成下拉框初次打开时响应很慢,影响用户 ...
- PC端触底效果反复触发的解决方案
最近在做一个PC端的项目,要求是在滑动到页面的底部的时候就动态的加载下一页的数据,代码实现思路如下: 首先,我们需要知道浏览器中有三个高度,分别是屏幕高度(outerHeight),文档容器高度(in ...
- 小程序上拉触底&下拉加载
data: { pageNo: 1,//当前页 pageSize: 10,//每页条数 count:'',//总条数 orderList: [], }, onLoad: function () { v ...
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
随机推荐
- 清空messages方法
1.du -sh /var/log/messages 2.losf /var/log/messages 3.cat /dev/null > /var/log/messages 4.du -sh ...
- NSString 属性为啥用copy 不用strong
copy不能修改,strong可以修改,防止字符串被意外修改.demo: ——————————————————code 你要的 demo—————————————————— @property (n ...
- python 面向对象 isinstance
查看某个对象是否 这个类实例 是返回True 否则返回False class Foo(object): pass obj = Foo() class Boo(object): pass print(i ...
- ssh 配置文件讲解大全 ssh调试模式 sftp scp strace进行调试 特权分离
ssh 配置文件讲解大全 ssh调试模式 sftp scp strace进行调试 特权分离 http://blog.chinaunix.net/uid-16728139-id-3265394.h ...
- PHP接收json格式的POST数据
/** * 获取 post 参数; 在 content_type 为 application/json 时,自动解析 json * @return array */ private function ...
- NFS-网络文件共享服务
目录 NFS介绍 什么是NFS(Network File System) 搭建NFS服务需要的软件包 极简步骤搭建NFS服务 准备两台机器 配置服务端(nfs-server) 配置客户端(web-cl ...
- (android实战)破解apk
简单的总结几个关键步骤: 一.工具准备:apktool , dex2jar , jd-gui 二.使用dex2jar + jd-gui 得到apk的java源码 1.用解压工具从 apk包中取出 cl ...
- sysbench 0.4.12安装
前提:mysql已安装完成,请参考http://www.cnblogs.com/lizhi221/p/6813907.html 安装依赖环境包: yum install -y bzr yum in ...
- 画柱状图Java
样例输入:THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.THIS IS AN EXAMPLE TO TEST FOR YOURHISTOGRAM PROGR ...
- Java transient关键字的理解
transient [ˈtrænziənt] adj. 短暂的; 转瞬即逝的; 临时的 n 临时旅客; 瞬变现象; 候鸟; 1. transient的作用及使用方法 我们都知道一个对象只要 ...