赞
踩
问题:指定区域内,显示返回的数据,要求先显示20条,区域超出部分滚动显示,对滚动条进行监听,滚动条触底后,继续显示下20条...
解决过程:
1.在区域的div上,添加@scroll事件和ref属性
2.scrollTop值是滚动位置,根据滚动条的变化而变化,可以理解为是卷或者滚起来的高度
3.scrollHeight值是内容区域的高度
4.offsetHeight值是显示区域的高度,是padding、border、水平滚动条相加的高度,注意并不包含margin的高度
5.当scrollTop+offsetHeight大于等于内容区域本身的高度时,代表滚动条到底了,进行对数据的处理(此处根据实际情况写逻辑代码即可)
6.设立boolean值判断是否是请求第一页数据或者请求其他页数据并进行拼接
解决结果:
- <div @scroll="scroll($event)" ref="scrollRef">
- <div v-for="item in list" :key="item.id">
- <div>{{item.name}}</div>
- </div>
- </div>
- let list = ref([])
- let loading = false
- let num = 1
- const scrollRef= ref(null)
- const getData = bool => {
- loading = true
- getTask(num).then(res => {
- loading = false
- if (res.data.code !== 0) {
- return
- }
- if(!bool){
- list.value = res.data.data
- return
- }
- list.value = list.value.concat(res.data.data)
- })
- }
- const scroll = event => {
- if(loading){
- return
- }
- let scrollTop = event.target.scrollTop
- let scrollHeight = event.target.scrollHeight
- let offsetHeight = Math.ceil(event.target.getBoundingClientRect().height)
- let currentHeight = scrollTop + offsetHeight
- if (currentHeight >= scrollHeight) {
- num = num + 1//分页参数,根据实际接口自行修改即可
- getData(true)
- }
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。