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. ORA-39006、ORA-39065、ORA-01403、ORA-39097错误解决办法

    今天有同事找说是expdp到出数据时报错: 处理方法:sys用户下执行如下语句重新生成DATAPUMP API用到的视图问题就解决了. SQL> @?/rdbms/admin/catmeta.s ...

  2. nginx 上php不可写解决方法

    在php.ini中设置的session.save_path会被php-fpm.conf中覆盖 打开php-fpm.conf文件找到php_value['session.save_apth'] 这里的/ ...

  3. python的pip的配置文件路径在哪里?如何修改pypi源?

    官方文档: https://pip.pypa.io/en/stable/user_guide/#configuration 举个例子: Windows用户想要更改pypi源,可以在%APPDATA%目 ...

  4. SQL基础--查询之一--单表查询

    SQL基础--查询之一--单表查询

  5. kafka详解

    一.基本概念 介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语:Kafk ...

  6. Docker(二)

    Docker Compose 多主机网络 容器集群管理 Docker结合Jenkins构建持续集成环境 Docker结合Consul实现服务发现 Docker API 日志管理

  7. C# 使用BackgroundWorker实现WinForm异步

    写了一个基于BackgorundWorker演示异步操作的例子.由于这个理基本上实现了BackgorundWorker的大部分功能:异步操作的启动.操作结束后的回调.异步操作的撤销和进度报告等等.尽管 ...

  8. JavaScript Ajax上传文件miniupload.js

    用到jquery和layer.js (function ($) { $.fn.miniupload = function (options, callback) { var jqDom = $(thi ...

  9. 72. Edit Distance(编辑距离 动态规划)

    Given two words word1 and word2, find the minimum number of operations required to convert word1 to  ...

  10. 算法第四版 在Linux 中调用Algs4库

    一: 搭建Java 环境   : 确认版本: 1.8及以上 [username:~/] javac -version javac 1.8.0_111 [username:~/] java -versi ...