- 33
- 0
vue 中使用 better-scroll 上拉加载反弹问题,上拉反弹两次之后,才能看见上拉加载出来的数据,
不能即使刷新页面高度
<div class="main" ref="wrapper">
<div class="main-box" >
<div class="box" v-for="item in data">
<img src="../../../static/img/banner.png" alt="" />
<img src="../../../static/img/banner.png" alt="" />
</div>
</div>
</div>
.main{
border: 1px solid red;
width: 100%;
position: absolute;
top:46px;
bottom:53px;
overflow: hidden;
}
.main-box{
display: flex;
flex-direction: column;
}
.box{
display: flex;
justify-content: space-between;
padding-bottom: 5px;
}
.box >img:nth-child(1){
width: 49%;
height: 100px;
}
.box >img:nth-child(2){
width: 49%;
height: 100px;
}
mounted(){
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.wrapper, {
pullUpLoad: {
threshold: -53,
},
resizePolling:60
})
this.load() //绑定上拉
})
},
created(){
this.LoadMore() //加载数据
},
methods:{
load(){ //这一部分不是加载数据,是初始化这个上拉
this.scroll.on('pullingUp', () => {
this.LoadMore() //上拉的时候调用
})
},
LoadMore(){
this.axios({
url:"/wxapi-web/diaryInfo/getDiaryInfoByCategoryId",
method:"get",
params:{
categoryID: -1, //请求tab的id
pageNum: this.pageNum, //页数
pageSize: this.pageSize,
}
}).then(res=>{
this.data = [...this.data,...res.data.pageInfo.list]
this.pageNum++
console.log(this.data)
this.scroll.refresh()
this.scroll.finishPullUp()
if (!res.data.pageInfo.hasNextPage) { //判断有没有下一页
this.scroll.finishPullUp()
console.log("加载完了")
}
})
}
}, 2
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
底。 普通会员 1楼
在 Vue 中,当使用
better-scroll进行滚动时,它默认会在滚动到底部时停止滚动。然而,这可能会导致一些问题,例如,如果你在页面加载完成之后仍然滚动,你可能无法获取到页面的高度。以下是一些可能导致这个问题的原因:
-
better-scroll默认在页面加载完成后立即停止滚动,所以即使你已经滚动到了页面底部,它仍然会继续滚动,直到滚动到底部。 -
better-scroll可能会添加一些滚动延迟,这可能会导致你在页面加载完成后仍然能够滚动。
为了解决这个问题,你可以尝试以下几种方法:
-
使用
window.onpopstate事件来监听页面滚动。当用户滚动到底部时,你可以检查window.onpopstate事件,如果它已经被触发,那么说明用户已经滚动到底部,你可以调用better-scroll的reset方法来停止滚动。 -
在
better-scroll的文档中查找关于如何处理滚动延迟的更多信息。这可能会帮助你找到解决这个问题的方法。 -
如果你想要在页面加载完成之后立即停止滚动,你可以使用
window.addEventListener('scroll', () => {})来监听滚动事件。然后在滚动到页面底部时,你可以调用better-scroll的reset方法来停止滚动。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
