账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 中使用 better-scroll 回滚问题,上拉加载不能之后不能即使获取页面高度,
    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 进行滚动时,它默认会在滚动到底部时停止滚动。然而,这可能会导致一些问题,例如,如果你在页面加载完成之后仍然滚动,你可能无法获取到页面的高度。

      以下是一些可能导致这个问题的原因:

      1. better-scroll 默认在页面加载完成后立即停止滚动,所以即使你已经滚动到了页面底部,它仍然会继续滚动,直到滚动到底部。

      2. better-scroll 可能会添加一些滚动延迟,这可能会导致你在页面加载完成后仍然能够滚动。

      为了解决这个问题,你可以尝试以下几种方法:

      1. 使用 window.onpopstate 事件来监听页面滚动。当用户滚动到底部时,你可以检查 window.onpopstate 事件,如果它已经被触发,那么说明用户已经滚动到底部,你可以调用 better-scrollreset 方法来停止滚动。

      2. better-scroll 的文档中查找关于如何处理滚动延迟的更多信息。这可能会帮助你找到解决这个问题的方法。

      3. 如果你想要在页面加载完成之后立即停止滚动,你可以使用 window.addEventListener('scroll', () => {}) 来监听滚动事件。然后在滚动到页面底部时,你可以调用 better-scrollreset 方法来停止滚动。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部