解决vue项目中better-scroll的刷新后滚动失效

最新推荐文章于 2023-10-10 10:06:33 发布
最新推荐文章于 2023-10-10 10:06:33 发布
阅读量920 收藏 2
点赞数 1
文章标签： vue html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44908601/article/details/110852680
版权
本文介绍了在Vue项目中遇到的一个问题，即页面初次打开时better-scroll可以正常滚动，但刷新页面后滚动功能失效。解决办法是为content区域设置高度，确保在页面刷新后仍能保持正确的滚动效果。
摘要由CSDN通过智能技术生成

1. 在vue项目中，一开始打开页面时是可以滚动的

在这里插入图片描述
这时hasVerticalScroll为true，可以滚动

2. 当刷新页面时，页面就不能滚动了

在这里插入图片描述搜索
template部分

 <div ref="container" class="container">
    <div class="content"
最低0.47元/天 解锁文章
@bj
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
解决Vue项目中使用better-scroll无法正常滚动
奶油糖霜的博客
07-30 605
问题描述： 最近在写Vue项目中，由于是移动端开发。为了改善原生滑动在移动端的流畅性问题，于是用了一个小工具better-scroll。但在Vue项目中封装scroll模块时，发现并不能正常滚动（无法滑动）。 import BScroll from 'better-scroll' export default { data() { return { scroll: null } }, mounted() { this.scroll = new BScroll(
Better-scroll高版本产生的无法滚动问题
qq_45914170的博客
01-24 535
Better-scroll高版本产生的无法滚动问题 最近在学习coderwhy老师的vue视频的时候，在使用better-scroll的时候，当时自己执行了下面代码 npm install better-scroll --save 所以导致了默认安装了最新的版本,后面写着写发现我的页面不能滚动的问题，当时看了代码和视频上的代码差不多，所以我怀疑是不是我的better-scroll版本过高的问题，因为我是刚接触这个better-scroll的东西，没有过多的时间去了解这个better-scroll的东西，不
vue下拉刷新与局部滚动冲突
weixin_44520715的博客
04-30 1722
滚动条部位，添加<div class=“main-bottom” @touchmove.stop> 布局 用固定定位 position:fixed
从A页面跳转的所有页面都无法滚动，刷新后就可以
weixin_30647065的博客
07-28 773
原来在A页面设置了弹窗弹出时禁止页面滚动，弹窗消失恢复滚动 跳转按钮设置在在弹窗上，弹窗未消失就跳转，未能恢复滚动 1 toProject() { 2 //关闭弹窗 3 this.ModelShow = false; 4 //稍延迟后跳转 5 setTimeout(() => { 6 this.$router.push({ ...
better-scroll
静水流深de博客
04-12 869
作用：实现滑动效果 首先，在github上搜索better-scroll https://github.com/ustbhuangyi/better-scroll 在vue中安装npm install better-scroll --save 引入：import BScroll from ‘better-scroll’ 按照里面的用法：套两层容器 <div class="wrapper"&g...
【JavaScript源代码】vue开发移动端使用better-scroll时click事件失效的解决方案.docx
12-29
在本文中，我们将深入探讨这个问题及其解决方案，并简要介绍如何在Vue项目中封装和使用Better-Scroll。 首先，`Better-Scroll`是一个流行的JavaScript滚动插件，它能提供流畅的滚动体验，尤其在移动端。在Vue项目中...
Vue中将better-scroll封装成一个组件，并实现完美吸顶效果
鸭绒的博客
11-25 1419
先来看看实现的效果： 上面的效果就是利用了better-scroll实现的滑动，可见better-scroll实现的弹性效果还是很不错的，但是better-scroll还是有很多bug的，因此对初次使用better-scroll的人不够友好。以往我们做吸顶效果都是直接使用 position:sticky 实现粘性布局,但该属性在该库就失效了，因此吸顶也成了一件难题，还好有人想到了好办法解决了该问题，后面再说。 直接看封装好的better-scroll: <template> <div
当vue遇见better-scroll所遇到的坑
丑小鸭变黑天鹅的博客
05-25 539
当vue遇见better-scroll所遇到的坑一、问题描述二、解决办法三、官网描述 一、问题描述 初次加载可以滑动，刷新之后不能滑动了 在学习vue的过程中，从网上找了一个案例去练习，视频中老师用到了better-scroll，然后跟着一模一样的敲，但是总是不能如愿以偿，初次加载可以正常只用滑动，一旦页面发送刷新，则鼠标滚动就失效了。找了很久解决办法，但是也没能解决。 从网上找过的办法，给出其中普遍给出的解决办法 1、给外面加上this.$nextTick(),并没能解决问题 //解决： this.$ne
vue2.0路由切换后页面滚动位置不变BUG的解决方法
08-27
下面小编就为大家分享一篇vue2.0路由切换后页面滚动位置不变BUG的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于使用better-scroll滑动无法滚动的技术总结
baidu_41677887的博客
09-23 3027
这个问题是我在编辑商城的遇到的问题，着实让我查找了好多资料 问题描述：使用better-scroll插件的时候，页面无法滚动 问题发生原因：最开始使用的better-scroll时候，对于普通的文档滑动完全没问题，但是我对起封装了一层代码， <template> <div class="wrapper" ref='wrapper'> <div class="content"> <slot></slot> </div>
better-scroll使用中的问题
GDYG5的博客
11-29 297
better-scroll 对于上拉滑动 一系列处理的框架 1、解决首页中可滚动区域的问题 Better-Scroll在决定由多少区域可滚动时，是根据scrollerHeight属性决定的 scrollerHeight属性是根据在Better-Scroll的content中的子组件的高度 但在我们的首页中，刚开始计算 scrollerHeight 属性时，是没有将图片的高度计算在内的。 所以计...
Vue2中路由跳转后页面位置不在顶部
weixin_67642008的博客
04-13 1009
vue路由跳转问题
解决vue跳转页面后，滚动位置不变的问题。
七七的博客
08-08 1081
/ 解决页面跳转保存滚动条位置问题。router/index.js中。
解决vue2路由切换后滚动条停留在上个页面的位置问题
最新发布
m0_52685922的博客
10-10 876
【代码】解决vue2路由切换后滚动条停留在上个页面的位置问题。
解决 Better-scroll 可滚动区域的bug
weixin_43720534的博客
05-21 1024
Better-scroll 在决定由多少区域可以滚动时 是根据scrollerHeight 属性决定的，scroolerHeight 属性是根据放 Better-scroll的conent中的子组件的高度，但是我们的首页中，刚开始在计算scrollerHeight属性时，是没有将图片计算在内的，所以 ， 计算出来的告诉是错误的，后来图片加载完成之后有了新的高度，但是 scrollerHeight 的属性并没有更新，所以就出现了滚动不了的bug ** 如何解决这个问题呢？ ** 监听每一张图片是否加载完成，只
Vue的滚动条-vue-happy-scroll用法
huanhuan03的博客
01-09 6296
vue-happ-scroll vue滚动条用法
better-scroll滚动失效的原因
m0_50853469的博客
05-31 1341
1.wrapper只能有一个div。 2.打印下scroll，看下wrapper和scroller里边的东西，在审查元素，看下scroller是否含有better-scroll的样式。 3.看下里边的wrapperHeight<scrollHeight，还有hasVerticalScroll是否为true。 4.如果上面条件都满足，还不能滚动，那就是没有写click的配置项。 ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值