| vue scroll滑动到底部自动加载 | 您所在的位置：网站首页 › h5端滚动到底部加载数据是什么 › vue scroll滑动到底部自动加载 |
vue scroll滑动到底部自动加载
|
vue中常常会遇到滑动加载的情况，为了不让数据一次性请求到太多。 那么接下来就来实现一下这个功能吧 下拉自动加载 {{index+1}} export default { data() { return { showdata: 10 } } } .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; }
1.首先创建10个div,在需要显示的内容区域内。为了区分，颜色有可能有点辣眼睛。
2.检测滑动条是否滑倒底部了 在滑动区域中加入@scoll 监听时间
当该区域的的正文区域的高度，减去可见区域的高度，小于设定的高度的时候，就认为这个滑块可以加载新的资源了。 如图在不停往下移动滑块的时候，就会不断增加滑块的个数
3.当请求接口的时候也是同理的。添加一个页数的参数，跟是否可以加载的判定。 下拉自动加载 {{index+1}} 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() } } } .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; }
python课程 https://marketing.csdn.net/poster/109?utm_source=NEWFXDT |
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |