使用Better-Scroll时，下拉存在卡顿无法下拉的问题

最新推荐文章于 2021-12-09 13:11:02 发布
最新推荐文章于 2021-12-09 13:11:02 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： 前端学习笔记 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28013889/article/details/104099446
版权

问题描述：
在滚动的时候，有时候会出现无法往下滚动的问题，存在卡顿现象。
问题原因：
因为数据是异步加载的，在生成内容的时候Better-scroll会去自动计算一个高度，但是计算的时候可能还未加载完成数据，例如图片还未加载出来，就会造成自动计算的高度与实际内容的高度不匹配的情况，就会出现无法滚动的问题。
解决措施
在要展示的数据加载完成后，执行scroll的刷新方法refresh()

coderZzb
关注
专栏目录
解决Vue项目中使用better-scroll在下拉加载页面后出现滑动卡顿问题
奶油糖霜的博客
07-31 1887
项目场景： 在vue项目中使用better-scroll解决原生滑动不够顺滑的问题，但在下拉加载更多数据时，出现无法下拉，滑动卡顿，但是稍微等一会，就又可以正常下拉滑动 原因分析： 出现该现象的原因是由于better-scroll中的一个属性：scrollerHeight better-scroll在决定有多少区域可以滚动时，是根据scrollerHeight属性决定的 scrollerHeight属性是根据放在better-scroll中子组件的高度决定的 但在刚下拉加载时，由于图片加载速度较慢，所以
vue 关于BetterScroll不能滑动问题
weixin_44642057的博客
10-24 1583
在我们的开发中，用vue开发移动端时，如果使用原生滚动的话，在模拟器上面不会出现什么问题，但到了真机上面就会出现滑动不流畅的问题。那么我们可以使用滑动插件来解决这个问题，下面我们来说一下betterscroll这个滑动插件 betterscroll是目前比较好用的一个滑动插件，但是第一次使用的时候总会出现一些问题，使得betterscroll无法达到预期的使用效果，下面就来说一下我觉得会出现的问题 1.页面不能滚动，但可以使用原生滚动 出现这个问题的原因可能是没有设置固定的滚动区域高度 &lt
解决Vue滑动插件Better-Scroll，卡顿，划不动的bug
weixin_45020094的博客
06-16 3520
bug原因： 因为Better-Scroll插件需要计算滑动的高度，如果页面图片较多，图片没有加载完成，滑动高度就已经计算出来，这个数据偏小，网速较快不会出现这个bu 解决方法： 每个图片加载完毕后，都让他重新计算滑动高度，最后算出来的高度就正确了 代码 使用 @load监听img标签 这样每次图片加载完毕，就会调用这个方法 <img :src="goodsItem.show.img" alt="" @load="imageLoad"> 获取到better-scroll的组件，
Better-Scroll内容无法下拉的Bug原因之一
u013500603的博客
07-20 547
#Better-Scorll# 系列文章 文章目录一、Better-Scroll是什么？二、1.Better-Scorll内容无法下拉的Bug原因之一2.解决办法 一、Better-Scroll是什么？ better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 二、 1.Better-Scorll内容无法下拉的Bug原因之一 代码如下
解决Better-Scroll在Vue内因为网络请求慢，导致无法滑动问题
nanxing的博客
02-03 1130
原因 Better-Scroll的实例有scrollerHeihgt属性它可以决定多少区域可以滚动 scrollerHeight属性值时Better-Scroll里的content中的子组件的高度 当子组件中的图片在网络请求到地址后，渲染的时间超过scrollerHeight属性计算出值的时间 scrollerHeight的值没有讲图片高度计算在内，就会造成页面无法滑动( 滑动过程中卡顿 ) 后来在图片加载出来后，而scrollerHeight的值并没有进行更新 解决 监听每一张图片是否加载完成，每加
better-scroll
03-07
在本文中，我们将深入探讨Better Scroll的核心特性、使用方法、配置选项以及常见问题，帮助开发者更好地理解和运用这一强大工具。 1. Better Scroll核心特性 - **高性能**：通过硬件加速和精确的事件处理，提供了...
[vue2-better-scroll基本配置项
weixin_45066195的博客
04-06 344
vue2-better-scroll基本配置项 // An highlighted block <vue-better-scroll ref="scroll" swipe-time="1500" bounce-time="bounceTime" :listenScroll="true" :start-y="parseInt(distanceScroll)" :pull-down-refresh="pullDownRefreshObj" :pull-up
vue之better-scroll处理滚动列表
努力是为了站在万人中央成为别人的光
09-21 559
心语：再长的路，一步步也能走完，再短的路，不迈开双脚也无法到达。 在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，可以是竖向滚动的列表，也可以是横向的，用better-scroll可以帮助我们轻松的实现这个需求。 那么better-scroll到底是什么呢？ BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。 为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置
vue移动端项目中会用到的better-scroll基本使用
青椒的博客
04-23 1080
GitHub：https://github.com/ustbhuangyi/better-scroll/tree/v2.0.0-beta.6 官方文档：https://better-scroll.github.io/docs/zh-CN/ 我们在pc端显示的效果也是可以滑动的但是到了移动端就可能出现卡顿状态，better-scroll能够让页面的滑动更加流畅 1.安装 在vue我们直接下载并引入...
scrolloView点击按钮实现滑动的时候有时候会出现卡顿的现象
zyn911314的博客
10-20 435
之前在Xcode6.4的时候点击按钮使用setContentOffset: animated:设置偏移量的时候一直没有碰到过卡顿的现象  在最近的项目中我把Xcode升到了7.0出现了点击按钮卡顿的现象，本人小菜鸟一枚，折腾许久都没有解决这个问题 后来试了下scrollview的点属性设置偏移量发现没有了卡顿现象，所以只好自己写了个方法加了个动画     _currentPage ++;
解决betterScroll在vue中存在图片时,出现拉不动的问题
12-10
1.先写一个图片加载的方法 class ImgLoadClass { static preloadImages = (arr) => { //已经加载完的图片数量 let loadeImage = 0 //存放图片的数组 let newImages = [] //处理存入字符串，取得src部分 //let arr = str.match(/src="(.+)"\s{1}/g) //返回一个promise对像 return new Promise((resolve,reject)=>{ for (let i=0;i < arr.length;i++){ for(let
vue better scroll 无法滚动的解决方法
08-27
better scroll可以实现轮播图和页面滚动，是移动端滚动插件，这篇文章主要介绍了vue better scroll 无法滚动的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Better-Scroll
weixin_44338156的博客
11-30 555
简介 Better-Scroll是一款专注于滚动的插件 当在浏览器端，由于ta的加持，还算顺畅 但在移动端，没有了浏览器，就会出现卡顿的现象 此插件就是解决这个问题，让滚动流畅，带来极致享受 使用（vue） 安装： npm install better-scroll --save 引入： import BScroll from 'better-scroll' 使用： <div class="wrapper"><!--class名字可以随便起，用ta来包括滚动内容--> .
Vue中解决better-scroll的滚动问题以及刷新页面better-scroll不起作用问题
weixin_47339511的博客
03-10 2790
不得不说better-scroll是个很好用的第三方框架，但是使用恰当才能发挥它强大的功能哦！具体使用步骤请移步→better-scroll链接Github 但是better-scroll用的恰当的话并不会出现在手机上滚动不了的情况 具体问题： 1.使用的时候为什么滚动不起作用 首先在在你引入better-scroll成功之后，你的html结构应该如下： <div ref="wrapper" class="wrapper"> <div class="content"></di
better-scroll在vue中使用出现的不滑动问题
qq_37609418的博客
12-09 1465
今天在vue中使用better-scroll时，发现第一次加载后页面无法滚动。 去查了相关问题后发现了 一大堆的解决方案，汇总后： 首先检查代码，content高度是否大于warpper、样式是否写错， 确认代码没有问题的情况下，可以考虑是否是，Dom加载问题，因为如果BetterScroll无法计算出高度，会出现这个问题，可以通过nextTick()或者在scroll事件中添加refresh()方法来重新计算高度 添加refresh附上代码： mounted() { // ref绑定在.
在vue中better-scroll的用法以及不能滑动的原因
Blablabla_的博客
12-23 1445
一.用法 1.首先要安装better-scroll： npm install better-scroll --save 然后在项目中引入它： import BScroll from ‘better-scroll’ 2.使用 html: <template> <div class="content"> <div class="left" ref="left...
better-scroll插件使用
qq_33503025的博客
07-06 746
首先，引入bscroll.min.js页面：&lt;div class="wrapper"&gt; &lt;ul class="content"&gt; &lt;/ul&gt; &lt;/div&gt;初始化：var goods_wrapper = document.querySelector('.wrapper'); var goods_scroll = new BScroll(go...
自己遇到vue使用better-scroll的坑
weixin_44816077的博客
11-21 689
使用better-scroll 1.安装 npm inatall better-scroll 2.在页面中引入 import Bscroll from 'better-scroll' 3.实例化使用 new Bcroll('.content_wrap',{}) 注意 使用包裹块一定要固定高宽，不然不会起作用 position: absolute top 45px l...
vue中使用better-scroll 无法滚动的问题 详解
weixin_43346106的博客
04-11 1747
如下 我的遇到的问题是，有时候主页刚刚加载就直接就不能滚动，有时候滑动到中间，明明下面还有图片，就有滑不动了。在上拉加载更多时，图片是加载了，但是就是要等一下或者直接 不能向上滑动。 better-scroll 滚动原理 better-scroll它有两个div层，wrapper层 和 content层，wrapper 表示的是滑动区域，content表示的滚动内容，当content层的高度或宽度大于wrapper层的时候，就可以纵向滚动和横向滚动了（和游览器页面的滚动原理一样） 这里比我将的更清楚
Vue中使用better-scroll实现下拉刷新，上拉加载功能。
最新发布
05-17
使用better-scroll实现下拉刷新和上拉加载功能，需要先安装better-scroll插件。 1. 安装better-scroll ```bash npm install better-scroll --save ``` 2. 导入better-scroll ```javascript import BScroll from ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值