vue滚动到底部加载数据并且防止触发多次
源码Demo:<template><div><ul class="list"><liv-for="(item,index) in listData" :key="index" :v-if="listData">{{item.album_title}}</li></...
·
源码Demo:
<template>
<div>
<ul class="list">
<li v-for="(item,index) in listData" :key="index" :v-if="listData">{{item.album_title}}</li>
</ul>
</div>
</template>
关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。
<script>
import $ from 'jquery';
var isbool=true;
export default {
data () {
return {
listData:[],
}
},
mounted() {
this.lists()
//滚动条到底部弹出评价窗口
var minAwayBtm = 0; // 距离页面底部的最小距离
$(window).scroll(()=> {
var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height();
if (awayBtm <= minAwayBtm && isbool) {
isbool=false;
alert("达到底部。");
this.lists()
}
})
},
methods: {
lists(){
this.$axios.get(this.Get_code_Host,{
params: {
format:"json",
calback:'',
from:"webapp_music",
method:"baidu.ting.billboard.billList",
type:1,
size:10,
offset:0
}
})
.then((res) => {
console.log(res.data)
this.listData=this.listData.concat(res.data.song_list)
isbool=true;
})
.catch(err => {
console.log(err)
})
}
}
}
</script>
更多推荐
已为社区贡献13条内容
所有评论(0)