vue中常常会遇到滑动加载的情况，为了不让数据一次性请求到太多。
那么接下来就来实现一下这个功能吧
<template> <div id="app"> <div class="showpanel"> <div class="title">下拉自动加载</div> <div class="boxpanel"> <div class="show-item" v-for="(index,item) in showdata" :key="index">{{index+1}}</div> </div> </div> </div> </template> <script> export default { data() { return { showdata: 10 } } } </script> <style lang="less" scoped> .showpanel { height:100%; width: 100%; display: flex; flex-direction: column; } .title { padding: 20px; text-align: center; } .boxpanel { flex: auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10%; background: blue; overflow-y: scroll; } .show-item { width:48%; background: brown; height:30%; margin-bottom: 20px; color: #fff; text-align: center; font-size: 40px; } </style>
1.首先创建10个div,在需要显示的内容区域内。为了区分，颜色有可能有点辣眼睛。
2.检测滑动条是否滑倒底部了
在滑动区域中加入@scoll 监听时间
当该区域的的正文区域的高度，减去可见区域的高度，小于设定的高度的时候，就认为这个滑块可以加载新的资源了。
如图在不停往下移动滑块的时候，就会不断增加滑块的个数
3.当请求接口的时候也是同理的。添加一个页数的参数，跟是否可以加载的判定。
<template> <div id="app"> <div class="showpanel"> <div class="title">下拉自动加载</div> <div class="boxpanel" @scroll="scrollBottom($event)"> <div class="show-item" v-for="(index,item) in showdata" :key="index">{{index+1}}</div> </div> </div> </div> </template> <script> export default { data() { return { showdata: [], page: 0, // 根据接口定义的初始值 loadflag: false // 是否可以加载数据 } }, methods: { scrollBottom(e) { let self = this let Scroll = e.target // 网页可见区域高：document.body.clientHeight // 网页正文全文高：document.body.scrollHeight let scrollHeight = Scroll.scrollHeight - Scroll.clientHeight self.scrollTop = Scroll.scrollTop if (scrollHeight - Scroll.scrollTop < 100 && !self.loadflag) { console.log('到底部了') self.loadflag = true self.page++ self.loadData() } }, loadData() { let self = this self.$axios .post('接口', '参数') .then(response => { var data = response.data if (data.code === 1) { if (data.data.length > 0) { var list = self.showdata self.showdata = list.concat(data.data) self.loadflag = false } else { console.log('没有更多参数了') } } else { console.log(data.meg) } }) .catch(function (error) { console.log(error) }) }, created () { let self = this self.loadData() } } } </script> <style lang="less" scoped> .showpanel { height:100%; width: 100%; display: flex; flex-direction: column; } .title { padding: 20px; text-align: center; } .boxpanel { flex: auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10%; background: blue; overflow-y: scroll; } .show-item { width:48%; background: brown; height:30%; margin-bottom: 20px; color: #fff; text-align: center; font-size: 40px; } </style>
python课程
https://marketing.csdn.net/poster/109?utm_source=NEWFXDT
