better-scroll无法滚动

最新推荐文章于 2023-11-01 10:47:22 发布
最新推荐文章于 2023-11-01 10:47:22 发布
阅读量994 收藏
点赞数 1
分类专栏： vue 文章标签： bs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmhlmh_/article/details/80974728
版权

昨天遇到这个Bug搞了两三个小时才解决...

比较坑的就是用bs插件时要能滚动的话有几点要注意的：

    ①父级元素设置固定高度且必须比子元素小

    ②父级元素样式要设置overflow:hidden，position: fixed

    我写的代码刚开始没有position: fixed，就无法滚动，改过来后就好了。

其它地方我参考的 点击打开链接

十一号路口。
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
better-scroll 无法滚动问题
d295968572的博客
03-29 682
一、better-scroll版本不合适-----之前使用的是2.x版本 npm uninstall better-scroll npm install better-scroll@1.8.1 --save 二、DOM层级关系 <!--错误写法--> <div class="wrapper"> <div class="content"> 内容..... </div> <ul> .
详解 vue better-scroll滚动插件排坑
08-28
BetterScroll 是一款移动端滚动插件，它的强大之处是解决移动端（已支持 PC）各种滚动场景需求的插件。BetterScroll 的核心是借鉴的 iScroll 的实现，它的 API 设计基本兼容 iScroll，在 iScroll 的基础上又扩展了...
Vue中解决better-scroll的滚动问题以及刷新页面better-scroll不起作用问题
weixin_47339511的博客
03-10 2748
不得不说better-scroll是个很好用的第三方框架，但是使用恰当才能发挥它强大的功能哦！具体使用步骤请移步→better-scroll链接Github 但是better-scroll用的恰当的话并不会出现在手机上滚动不了的情况 具体问题： 1.使用的时候为什么滚动不起作用 首先在在你引入better-scroll成功之后，你的html结构应该如下： <div ref="wrapper" class="wrapper"> <div class="content"></di
Vue项目解决better-scroll无法滚动
Bat_Reality的博客
02-21 341
1. better-scroll版本不合适 npm uninstall better-scroll npm install better-scroll@1.8.1 --save 2. 未添加对应属性值(mouseWheel) <script> import BScroll from 'better-scroll' export default { name: "Scoll", methods: { initScroll(
解决Vue使用better-scroll无法滚动的问题
qq_36882279的博客
03-17 1660
如何解决Vue使用better-scroll无法滚动的问题 首先确定content的高度要比wrapper要高。我们知道better-scroll的基本原理如图 然后确定wrapper的CSS有设置overflow: hidden 以及高度 height 如果以上情况都正确那么接下来我们使用插件 安装依赖 npm install @better-scroll/observe-dom import BScroll from '@better-scroll/core' import ObserveDom
vue中使用better-scroll 无法滚动的问题 详解
weixin_43346106的博客
04-11 1715
如下 我的遇到的问题是，有时候主页刚刚加载就直接就不能滚动，有时候滑动到中间，明明下面还有图片，就有滑不动了。在上拉加载更多时，图片是加载了，但是就是要等一下或者直接 不能向上滑动。 better-scroll 滚动原理 better-scroll它有两个div层，wrapper层 和 content层，wrapper 表示的是滑动区域，content表示的滚动内容，当content层的高度或宽度大于wrapper层的时候，就可以纵向滚动和横向滚动了（和游览器页面的滚动原理一样） 这里比我将的更清楚
vue better-scroll横向滚动
仄言的博客
04-25 3485
vue 实现better-scroll横向滚动 首先需要引入better-scrollc 插件（better-scroll插件作用主要是解决移动端的滚动环境（已支持PC））。 npm install better-scroll --save //组件文件中引入better-scroll import BScroll from 'better-scroll' ...
彻底解决使用better-scroll页面不能滚动的问题
jiaohuizhuang6019的博客
11-01 1268
彻底解决使用better-scroll页面不能滚动的问题
better-scroll实现滚动效果
qq_44957616的博客
09-27 1536
滚动原理 在浏览器中的滚动中，当内容的高度高于外边容器的高度的时候也就出现了滚动条，我们可以通过使用滚动条来看到超出的部分. better-scroll的原理正是基于这里，内容部分的宽度/高度必须大于外部宽度/高度 注意：滚动的元素只能是第一个容器的第一个元素。 废话不多说，上代码 singersMsg:[ { idx:1, con:'你好', }, {
用better-scroll滚动失效，v-if、v-show与better-scroll配合使用问题
jie_rookie的博客
09-29 534
v-if会出现多个better-scroll只初始化一次； 解决：采用v-show v-show会出现为false的better-scroll滚动不了（display为none的元素是获取不到高度的）； 解决方案一：better-scroll初始化时判断v-show的值是否为true且better-scroll还未初始化的情况下进行初始化； 解决方案二：如下代码 import BScroll from "better-scroll"; export default { data() {
vue使用better-scroll实现菜单列表左右联动
07-13
而 Better-Scroll 是一个强大的滚动插件，它能帮助开发者在移动设备或者浏览器上实现高性能、易用的滚动效果。在本篇文章中，我们将深入探讨如何在 Vue 项目中利用 Better-Scroll 实现菜单列表的左右联动功能。 ...
Vue + better-scroll 实现移动端字母索引导航功能
08-27
Vue + better-scroll 实现移动端字母索引导航功能的要点是使用 better-scroll 实现滚动，并使用 Vue 实现列表渲染。首先，需要安装 Vue-cli 和 better-scroll，然后创建一个新的 Vue 项目，并将 better-scroll 安装...
better-scroll:better-scroll横向滚动的demo
05-16
测试演示一个Vue.js项目构建设置 # install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view...
vue better-scroll插件使用详解
08-28
然而，在使用better-scroll时，需要注意Vue的数据更新是异步的，better-scroll无法获取目标内容的高度，导致无法滚动的问题。解决这个问题可以使用Vue的nextTick()方法，例如： Vue.nextTick(function () { // DOM...
vue项目报错expected "indent", got "eos"
。
07-16 6337
如图，在写vue项目时stylus代码报错，这样的错误是因为混用空格和tab键造成的。 解决方案: 可以把python风格的代码改成类css的加上{}而不是缩进来区别。...
Swiper插件隐藏后再显示造成滑动异常
。
07-11 2284
vue中的Swiper插件原本可以正常滑动，在插件上添加了click事件，并且事件响应函数为show = !show,插件上设置了v-show="show"，这样原本swiper插件可以正常滑动，鼠标点击消失后再次点击显示出来滑动就有些异常，解决方案是在Siper插件绑定的swiperOptions里设置observeParents：true,observer:true....
H5中的localstorage缓存对象
。
07-10 845
以前可以用cookie来缓存浏览器内容的，html5提供了一种更简单的缓存方式localstorage（无限期的缓存）.localstorage是浏览器内置对象,使用很简单，比如你要存一个{'city': 'BeiJing'}就直接用localstorage.city = ‘BeiJing’，使用的时候localstorage.city就可以获取到'BeiJing'。值得注意的是，有些用户可能关闭...
chromedriver-mac-arm64_126.0.6474.0.zip
最新发布
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值