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 ...
随机推荐
- Oracle管理监控之使用utl_mail自动邮件报警配置
--代发邮件存储过程源码如下: CREATE OR REPLACE PROCEDURE send_mail(p_recipient VARCHAR2, -- 邮件接收人 ...
- talib 中文文档(十二):Pattern Recognition Functions K线模式识别,形态识别
Pattern Recognition Functions K线模式识别,形态识别 CDL2CROWS - Two Crows 函数名:CDL2CROWS 名称:Two Crows 两只乌鸦 简介:三 ...
- Intellij idea的Dependencies波浪线
昨天在家做项目不知道搞了什么出现了大量波浪线.搞了大半天解决了下面的问题. 1.pom.xml出现波浪线.看右边 maven project-->Profiles 勾选dev 2.上面已勾选还有 ...
- 求连续出现5次以上的值,并且取第5次所在id
关键字:求连续出现5次以上的值,并且取第5次所在id 关键字:求在某列连续出现N次值的的数据,并且取第M次出现所在行 需求,求连续出现5次以上的值,并且取第5次所在id SQL SERVER: --测 ...
- centos 邮件服务 腾讯企业邮箱(免费) 使用iRedmail 需要有公网的centos主机 发邮件协议:smtp 端口25 收邮件协议:pop3 端口110 iredmail安装配置 使用邮箱系统 第三十一节课
centos 邮件服务 腾讯企业邮箱(免费) 使用iRedmail 需要有公网的centos主机 发邮件协议:smtp 端口25 收邮件协议:pop3 端口110 iredmail安装配置 ...
- django高级之点赞、文章评论及上传文件
目录: 点赞 文章评论 上传文件 保留页面条件 一.点赞 1.所用技术: django model F查询 js应用:$(function () {}); 为文件加载完成执行ready() 方法.等同 ...
- web项目读取classpath路径下面的文件
首先分两大类按web容器分类 一种是普通的web项目,像用Tomcat容器,特点是压缩包随着容器的启动会解压缩成一个文件夹,项目访问的时候,实际是去访问文件夹,而不是jar或者war包. 这种的无论你 ...
- PHP指定概率算法
转载来源链接: https://blog.csdn.net/sinat_35861727/article/details/54980807 PHP指定概率算法,可用于刮刮卡,大转盘等抽奖算法. 假设: ...
- redis.conf配置文件说明
# Redis 配置文件 # 当配置中需要配置内存大小时,可以使用 1k, 5GB, 4M 等类似的格式,其转换方式如下(不区分大小写) # # 1k => 1000 bytes # 1kb = ...
- MySQL中特有的函数CONV函数
CONV函数:用于对数字进行转换,比如将十进制的数字转化成二进制,参数格式convert(N,frombse,tobase) 将数字N从frombase进制转化成tobase进制,并且以字符串的格式返 ...