better-scroll无效的解决方案(放在nextTick里调用)

最新推荐文章于 2022-08-12 14:56:38 发布
最新推荐文章于 2022-08-12 14:56:38 发布
阅读量594 收藏
点赞数
分类专栏： 移动端
原文链接：https://blog.csdn.net/weixin_43586120/article/details/103143682
版权

使用Better-scroll无法滚动可能是多种原因造成的，子元素高度小于父元素高度、层级关系不对（只作用于父元素中的第一个子元素），还有可能是实例化的时机不对造成，这时可以在Vue.$nextTick（）钩子里去初始化better-scroll。this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染，这样能确保在实例化时能正确获取需要添加滚动的元素。

羊二哥
关注
专栏目录
(2021通过插件解决)better-scroll插件的无法滑动bug
王光迪的CSDN
02-27 4089
2021-2-27日，这是一篇绝对可以解决问题的文章
「Vue」点击滚动页面与$nextTick问题解决
Hugh
06-10 1344
这一篇主要讲述今天使用Vue点击滚动的实现 以及Vue在页面渲染未完成时滚动偏移的问题 页面结构 添加滚动前页面的基本结构 点击标题时触发绑定样式.table-display，当前点击显示的表格为display:table;其他详情表格为display:none; 监听点击事件触发方法修改标识，控制样式的绑定。 <template> &l...
better-scroll
qq_44631273的博客
02-04 71
better-scroll 安装 npm install better-scroll@next -S 把better-scroll封装成一个组件 <template> <div class="wrapper" ref="wrapper"> <div class="content"> <slot></slot> ...
vue2中引用及使用 better-scroll的方法详解
01-21
使用时有三个要点： 一：html部分 <div class=example ref=divScroll> <div> <p>内容1</p> <p>内容2</p> <ul> <li>list1</li> <li>list2</li> <ul> </div> </div> 【注】 1.最外层加ref，让better-scroll通过ref来获取整个div；  2.紧跟一个div，不用加任何样式或class， 最终可以滑动的部分就是这个div，这个div必须是 加了ref 的div 的 直接子元素。  在这个div里面就可
vue 中 $nextTick() 不生效的问题
Winsom1的博客
08-12 6363
this.$nextTick() 是在数据完成更新后立即获取数据，但是我使用nextTick没有生效，获取的数据还是更新前的。
vue-better-scroll 的使用实例代码详解
10-17
Vue-better-scroll是一个专为Vue.js设计的插件，它是better-scroll的Vue版本封装，用于解决移动端（如手机、平板等）的滚动列表或滚动页面的场景。better-scroll内部使用原生的滚动事件来提供流畅、自然的滚动效果，...
Vue中将better-scroll封装成一个组件，并实现完美吸顶效果
鸭绒的博客
11-25 1434
先来看看实现的效果： 上面的效果就是利用了better-scroll实现的滑动，可见better-scroll实现的弹性效果还是很不错的，但是better-scroll还是有很多bug的，因此对初次使用better-scroll的人不够友好。以往我们做吸顶效果都是直接使用 position:sticky 实现粘性布局,但该属性在该库就失效了，因此吸顶也成了一件难题，还好有人想到了好办法解决了该问题，后面再说。 直接看封装好的better-scroll: <template> <div
better-scroll笔记
lyy_fighting的博客
01-09 636
better-scroll 来源：https://github.com/ustbhuangyi/better-scroll 使用说明：https://better-scroll.github.io/docs/en-US/ 操作案例 （学习coderwhy的vue框架ing） 演示代码在src/views/category/Category.vue 1.安装框架 1）npm install better-scroll --save 弹幕大佬说新版本很多bug，所以跟着老师安装的版本即可 npm install
Vue项目中使用better-scroll实现菜单映射功能方法
10-16
在本场景中，我们利用`better-scroll`这个强大的滚动插件来实现这一功能。`better-scroll`允许开发者在Web应用中创建流畅、自然的滚动效果，支持多种自定义配置，适合用于列表、轮播图等组件。 首先，我们需要了解`...
个人理解this.$nextTick()的使用场景
热门推荐
如影随风
07-16 4万+
最近有在一个老项目的html页面中使用vue和echarts，点击按钮后需要重新渲染echart图标,但是echart却报错：Can't get dom width or height。可以很清楚知道是由于echarts获取不到宽度和高度，我试过使用this.$refs来过去元素的宽高，但还是失败了，所以，我觉得还是dom渲染问题，那么此时快速的解决办法就是使用this.$nextTick()方法...
nextTick发现获取不到子组件DOM实例了，该咋办？
少油少盐不要辣
01-30 1471
1.思考 问题的根源在于，使用了v-if，当条件变为true时，如何知道子组件完成渲染了？可以在子组件mounted钩子函数中使用$emit()告诉父组件我已完成渲染了。父组件则使用$on进行监听，在回调中，获取子组件实例。 2.代码 1.父组件 <template> <div class="out-wrapper"> <Child v-if="isShowChild" ref="child"/> <button @click="handleI
当 better-scroll 遇见 Vue
weixin_33812433的博客
06-01 4026
作者：滴滴公共前端 黄轶 在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了。 以滴滴为例，可以是这样竖向滚动的列表，如图所示： 竖向列表 也可以是横向滚动的导航栏，如图所示： 横向列表 可以打开“微信 —&gt; 钱包—&gt;滴滴出行”体验效果。 我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll。 什么是 better-scroll better-...
Vue中better-scroll实现左右侧BScroll联动nextTick
youngAda的专栏
10-23 382
better-scroll用法及掉过的坑引用 引用 ```javascript <script> import BScroll from 'better-scroll' export default { watch: { menus() { this.$nextTick(() => { this._initRightLiTops() this._initBScroll() }) }, }, methods
better-scroll插件初使用
llx18042693031的博客
02-03 3万+
模仿了一个饿了吗页面先上图，看一看better-scroll的效果 如果用overflow：auto或scroll属性，这样的页面就会出现两个滚动条，用户体验会有折扣，所以给介绍一款插件better-scroll，附上github资源链接。这款插件是基于iscroll插件做的重新封装，改善了一些bug，增加了一些拓展功能（插件作者并不是本人，望周知），有兴趣的小伙伴们可以自行下载体验体验。那么今天
better-scroll滚动不了的问题
Seety_ST的专栏
09-08 7547
今天有空尝试用了better-scroll组件来写slider，谁知道遇到一个很坑的一个东西。1、一定要每个slider-item元素添加一个宽度，重点是父元素slider-group的宽度也一定要大于等于所有子元素slider-item之和。2、一定要保证在DOM渲染完毕后初始化better-scroll，也就是添加延时执行，setTimeout(() => { this._in
vue使用 better-scroll的参数和方法
weixin_34310785的博客
11-09 306
格式：var obj = new BScroll(object,{[option1,],.,.});注意：1、要确保object元素的高度比其父元素高2、使用时，一定要确保object所在的dom渲染后，再用上面的语句，或者obj.refresh() Options 参数startX: 0 开始的X轴位置startY: 0 开始的Y轴位置scrollY: true 滚动方向为 Y 轴scrollX...
使用better-scroll时已初始化但页面无法滚动
weixin_45838680的博客
06-16 558
参考：https://blog.csdn.net/sinat_39626276/article/details/79792790?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1
better-scroll无法滚动nextTick无效
最新发布
07-27
根据引用\[1\]，BetterScroll是一款解决移动端各种滚动场景需求的插件，它的核心是基于iscroll实现的，并在此基础上进行了一些扩展和性能优化。它是使用纯JavaScript实现的，无依赖关系。 根据引用\[2\]，在使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值