better-scroll刷新后才能滑动的解决方案

最新推荐文章于 2022-05-22 10:21:06 发布
最新推荐文章于 2022-05-22 10:21:06 发布
阅读量1.9k 收藏 3
点赞数 10
文章标签： vue html web app vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiexie16888/article/details/103838398
版权

better-scroll刷新后才能滑动的解决方案
近期在写一个Vue移动端项目时 使用了better-scroll插件
但是页面初始化以后滑动事件失效，需要从新刷新页面才能启动功能，
这个问题困扰了我将近一天时间，在感觉解决无望时就真机测试了下 发现并没出现问题，遂又找了几个机型进行测试，发现并没有问题，
然后我又去better-scroll官网看了下他的demo 也会出现同样的问题！！ 合着只是新版谷歌与better-scroll自身的兼容问题，并不影响项目的正常运转，只是在谷歌进行移动端测试时才会出现罢了 …

xiexie16888
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue 关于BetterScroll不能滑动问题
weixin_44642057的博客
10-24 1530
在我们的开发中，用vue开发移动端时，如果使用原生滚动的话，在模拟器上面不会出现什么问题，但到了真机上面就会出现滑动不流畅的问题。那么我们可以使用滑动插件来解决这个问题，下面我们来说一下betterscroll这个滑动插件 betterscroll是目前比较好用的一个滑动插件，但是第一次使用的时候总会出现一些问题，使得betterscroll无法达到预期的使用效果，下面就来说一下我觉得会出现的问题 1.页面不能滚动，但可以使用原生滚动 出现这个问题的原因可能是没有设置固定的滚动区域高度 &lt
better-scroll 刷新后才能滚动的问题
Stars_in_rain的博客
08-17 1233
项目启动后不能直接实现滚动的效果，刷新后才能正常滚动。 我在better-scroll初始化的option中进行了如下配置： mouseWheel: true,//开启鼠标滚轮 disableMouse: false,//启用鼠标拖动 disableTouch: false//启用手指触摸 这样可以鼠标滑动，在鼠标滑动后就可以正常滚动了 参考文章：添加链接描述 ...
vue项目之移动端better-scroll的使用
牛先森家的博客
07-25 356
vue项目之移动端better-scroll的使用vue项目之移动端better-scroll的使用 vue项目之移动端better-scroll的使用 封装better-scroll <template> <div class="wrapper" ref="wrapper"> <div> <slot></slot> </div> </div> </template> &lt
better-scroll滑动以及解决better-scroll手机模式下刷新才能滚动的问题
JasonJust博客站
03-04 576
better-scroll滑动：（解决better-scroll手机模式下刷新才能滚动的问题在末尾，需要可自行下滑） 首先你要有个想显示的列表元素content，其次将列表放进一个展示的父容器中（wrapper） 这时你必须给父容器一个固定的高度，方便content将它撑起来，当然为了方便看到最后元素在父容器里，我给父容器加了一个背景色 1、安装better-scroll npm install better-scroll --save 2、引入 import BScroll from ‘bett
vue使用better-scroll实现菜单列表左右联动
07-13
而 Better-Scroll 是一个强大的滚动插件，它能帮助开发者在移动设备或者浏览器上实现高性能、易用的滚动效果。在本篇文章中，我们将深入探讨如何在 Vue 项目中利用 Better-Scroll 实现菜单列表的左右联动功能。 ...
vue使用better-scroll实现滑动以及左右联动
10-15
Better Scroll提供了解决方案，可以通过监听滚动行为保持滚动位置。 **三、在项目中的使用** 一个常见的应用场景是左右联动的滑动效果，即滑动右侧内容时，左侧会出现相应的标题高亮，反之亦然。以下是如何实现这...
vue2.0 better-scroll 实现移动端滑动的示例代码
08-28
Vue2.0 Better-Scroll 实现移动端滑动示例代码 本文主要介绍了使用 Vue2.0 和 Better-Scroll 实现移动端滑动的示例代码，着重于左右联动效果的实现方法。 Better-Scroll 介绍 Better-Scroll 是一个 JavaScript ...
vue基于better-scroll实现左右联动滑动页面
01-21
本文实例为大家分享了vue基于better-scroll实现左右联动滑动页面，供大家参考，具体内容如下 界面如下： vue模板 <div class=menu-wrapper> <li class=menu-item v-for=(good, key=index class={current: ...
vue better-scroll插件使用详解
08-28
本篇文章主要介绍了vue better-scroll插件的使用详解，better-scroll是一个移动端滚动的解决方案，它基于iscroll的重写，具有强大的功能，可以实现普通的滚动列表、轮播图、picker等等。 better-scroll的使用需要在...
关于better-scroll的使用
qq_42931285的博客
05-22 382
better-scroll、页面滚动
vue中better-scroll中页面滚动无效的问题
Buddha_ITXiong的博客
06-17 3466
因为在做项目的时候要用到滚动，所以引用了better-scroll这个插件，于是按照官网用法：&lt;script&gt; import BScroll from 'better-scroll' export default{ name: "CityList", mounted(){ this.scroll = new BScroll(this...
BetterScroll简单学习应用
weixin_52263227的博客
02-11 858
基于原生js实现滚动效果在移动端可能会卡顿的背景下，使用BetterScroll实现滚动效果 BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。 Better-scroll的基本使用： 1.在需要使用的项目中
完美解决betterScroll需要刷新才能正常下滑的问题
qq_42147034的博客
09-05 887
**产生原因：需要异步获取数据，content在被撑起之前scroll就已经创建， 解决思路： 1.了解父子组件各生命周期函数的执行顺序， 2. 了解scroll对象的创建时间和content的加载时间 可行方案： 1. 延迟创建scroll对象 （setTimeout） 2. 组件懒加载，在最后一个子组件加载完成后触发一个自定义时间，调用scroll对象的refresh()方法 const pt = ()=> import ("url") 链接： vue父子组件各生命周期执行顺序 .
解决vue项目中better-scroll的刷新后滚动失效
qq_44908601的博客
12-08 908
1. 在vue项目中，一开始打开页面时是可以滚动的 这时hasVerticalScroll为true，可以滚动 2. 当刷新页面时，页面就不能滚动了 template部分 <div ref="container" class="container"> <div class="content"> <!-- 滚动列表 --> <div class="cityHot"> <div class="C
vue引入better-scroll
最新发布
08-25
要在Vue项目中引入better-scroll，你需要按照以下步骤进行操作： 1. 首先，使用npm或yarn安装better-scroll依赖： ``` npm install better-scroll --save ``` 或 ``` yarn add better-scroll ``` 2. 在你的Vue组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值