better-scroll一直不生效的坑

最新推荐文章于 2023-08-17 22:03:31 发布
最新推荐文章于 2023-08-17 22:03:31 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： Vue学习 文章标签： vue.js better-scroll
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Venus_j/article/details/118525884
版权

better-scroll如果不起作用，可以从下面几点筛查原因：

1.父元素包含子元素，父元素被初始化成better-scroll。子元素的高度一定要高于父元素，否则滚动不生效的。有一点要注意，就是初始化better-scroll的时候有可能子元素里面的内容还没有渲染出来，所以子元素的高度没有高于父元素，better-scroll不起作用

2.这个坑我踩了几个小时终于发现哪里不对了!!!!!太坑了

父元素被初始化成better-scroll，他的子元素只能有一个！！！！如果有多个，只对第一个子元素起作用！

三蚊
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue使用better-scroll实现菜单列表左右联动
07-13
vue使用better-scroll实现菜单列表左右联动
vue better-scroll插件使用详解
08-28
本篇文章主要介绍了vue better-scroll插件使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue + better-scroll 实现移动端字母索引导航功能
08-27
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue + better-scroll 实现移动端字母索引导航功能,需要的朋友可以参考下
详解 vue better-scroll滚动插件排坑
08-28
本篇文章主要介绍了详解 vue better-scroll滚动插件排坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
better-scroll无效的解决方案(放在nextTick里调用)
一只小绵羊
12-27 580
better-scroll无效的解决方案(放在nextTick里调用)
better-scroll滚动无效 几种原因
WEB木易
08-22 2740
better-scroll滚动无效 几种原因 1.是否设置初始化 2.是否父元素设置了高度大于父元素 父元素可以设置100%， 3.DOM的的层级是否正确 <div class="wrapper"> <div class="content"> content... </div> </div> 上面这种方式是可以实...
better-scroll弹层中Tab切换之后滑动失效的Bug
百变魔旅
11-08 938
需求说明： 在Vue列表页面使用better-scroll滑动，并且，在子元素中创建弹层，弹层中也使用better-scroll。 问题说明： 1、弹层中滑动，父级也跟着滑动； 2、第一次打开弹层，子元素可以滑动，切换Tab之后滑动失效； <template> <div ref="wrapper"><!--列表滚动--> <div ref="inWrapper"> <van-search v-model="key" @sear.
用BetterScrol插件vue无法滚动解决方法
daliujaja的博客
05-23 81
betterscroll无法滚动
Vue 中 better-scroll 上拉加载，下拉刷新
没有翅膀的我们，只是随便认为不能飞而已
09-24 795
Options startX: 0 开始的X轴位置 startY: 0 开始的Y轴位置 scrollY: true 滚动方向为 Y 轴 scrollX: true 滚动方向为 X 轴 click: true 是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用_constructed，若是bs派发的则为true directionLockThr...
js原生滚动与使用插件better-scroll不起作用原因
m0_66468899的博客
08-17 78
js原生滚动与使用插件better-scroll不起作用原因 1，js原生滚动：（只需要设置父容器wrapper的高度和设置一下overflow-y：scroll，默认处理了overflow:hidden;） /* 局部滚动 ~但是在移动端滚动非常卡顿*/ .wrapper{ height: 300px; overflow-y: scroll; border: 1px solid orange; } 2，使用插件better-scroll不起作用原因： （1）父容器wrapper
我遇到的vue+better-scroll滚动不生效问题
Stars_in_rain的博客
08-16 1206
一、DOM结构不正确 better-scroll的结构应为三层结构，且公用同一父节点，最外层的包裹层的内层content只有一个 <div class="wrapper" ref="wrapper"> <ul class="content"> <li></li> <li></li> <li></li> </ul> </div>
关于使用better-scroll滑动无法滚动的技术总结
baidu_41677887的博客
09-23 2955
这个问题是我在编辑商城的遇到的问题，着实让我查找了好多资料 问题描述：使用better-scroll插件的时候，页面无法滚动 问题发生原因：最开始使用的better-scroll时候，对于普通的文档滑动完全没问题，但是我对起封装了一层代码， <template> <div class="wrapper" ref='wrapper'> <div class="content"> <slot></slot> </div>
better-scroll 失效问题与求助
qq_52753587的博客
12-16 899
在使用better-scroll的时候，我将他封装成了一个组件，然后直接在项目中使用，代码如下：但出现了滚动失效的bug。 <template> <div class="wrapper" ref="wrapper"> <div class="content"> <slot></slot> </div> </div> </template> <scroll>&
better-scroll 无法滚动问题
d295968572的博客
03-29 666
一、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 下 click 事件失效问题（PC端却正常click点击）
仙魁XAN
06-26 956
Vue 之 移动端 better-scroll 下 click 事件失效问题（PC端却正常click点击）Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，Vue 在PC 端在使用 better-scroll 下的 click 能正常点击，切换到移动端， better-scroll 下的 click点击却失效的简单处理 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。1、在使用better-scroll 进行页面过长的滚动预览，2、在 better-scroll 滚
better-scroll踩坑之scrollStart、scroll与scrollEnd-工作笔记
simper_boy的博客
08-16 3333
前两天老板说新增一个效果 在滑动的时候让底部导航slidedown(下滑隐藏)、滑动停止的时候slidup(上移显示)； 基于原项目使用的better-scroll实现。 动画效果是使用animate库 + vue实现的，这个跟坑没关系，代码就不贴了。 一开始实现思路是这样的： 在滑动的时候我就让他下滑隐藏，滑动停止的时候就上移显示，em，正常来说是这样的 /*初始化 import Scroll...
better-scroll插件初始化后没有效果?
weixin_33824363的博客
03-14 1164
说在前面 最近做开发,用到了一个很著名的Vue插件-better-scroll.这个插件主要是用来解移动端各种滚动页面的需求.我在项目中想要一个页面的滚动效果,引入了这个插件之后,按照作者的方法进行了初始化,但是仍然无法实现.经过我不断的谷歌,终于找到了解决的办法.下面我来介绍一下这个插件的具体的用法. 安装及其引入 npm install better-scroll --save 复制代...
better-scroll滚动失效的原因
m0_50853469的博客
05-31 1311
1.wrapper只能有一个div。 2.打印下scroll，看下wrapper和scroller里边的东西，在审查元素，看下scroller是否含有better-scroll的样式。 3.看下里边的wrapperHeight<scrollHeight，还有hasVerticalScroll是否为true。 4.如果上面条件都满足，还不能滚动，那就是没有写click的配置项。 ...
vue引入better-scroll
最新发布
08-25
要在Vue项目中引入better-scroll，你需要按照以下步骤进行操作： 1. 首先，使用npm或yarn安装better-scroll依赖： ``` npm install better-scroll --save ``` 或 ``` yarn add better-scroll ``` 2. 在你的Vue组件中引入better-scroll： ```javascript import BScroll from 'better-scroll' ``` 3. 在Vue的生命周期钩子函数中创建和初始化better-scroll： ```javascript export default { mounted() { this.$nextTick(() => { this.scroll = new BScroll(this.$refs.wrapper, { // 配置项 }) }) }, // ... } ``` 这里的`this.$refs.wrapper`是一个DOM元素的引用，你需要在你的模板中添加一个具有`ref`属性的元素，例如： ```html <template> <div ref="wrapper"></div> </template> ``` 4. 根据你的需求配置和使用better-scroll实例。你可以通过传递选项对象来配置better-scroll的行为和外观。例如，你可以设置滚动方向、滚动条、弹性等等。具体的配置选项，请参考better-scroll的文档。 这样，你就成功地在Vue项目中引入了better-scroll，并可以根据你的需求来使用它了。记得根据文档来正确配置和使用better-scroll实例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值