better-scroll使用的坑

最新推荐文章于 2021-08-28 18:27:39 发布
最新推荐文章于 2021-08-28 18:27:39 发布
阅读量3k 收藏
点赞数
文章标签： vue better-scroll 滚动不了
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaoshuhong43/article/details/79339071
版权

这两天在写一个音乐播放器的网页，需要用到better-scroll，按照   https://www.imooc.com/article/18232   的教程一步一步配置，还是没办法滚动，检查了一下是不是初始化之后才开始渲染组件，也发现没有问题，最后发现问题关键在这里


需要给父容器增加overflow:hidden以及设置height，不然是没办法上下滚动的。

然后晒晒效果图


yaoshuhong43
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中的Scroll插件
06-07
jQuery中的Scroll插件，实现本页面跳转效果
vue better-scroll插件使用详解
08-28
vue better-scroll插件使用详解 本篇文章主要介绍了vue better-scroll插件的使用详解，better-scroll是一个移动端滚动的解决方案，它基于iscroll的重写，具有强大的功能，可以实现普通的滚动列表、轮播图、picker...
better-scroll 使用
q15642的博客
02-01 526
首先按照官方文档写出html结构样式， 如下： 下拉刷新 {{num}} {{person.name}} 加载更多 其中的提示信息
使用better-scroll 封装的vue组件 不能滚动到底部 一种解决方案
Coralpapy的博客
08-28 582
https://blog.csdn.net/Charissa2017/article/details/104833848/
方法/通用better-scroll【最详细教程】
weixin_46435234的博客
07-14 2803
文章目录 better-scroll介绍better-scroll 是什么起步滚动原理better-scroll 在 MVVM 框架的应用 安装NPMscript 加载 选项 / 基础startXstartYscrollXscrollYfreeScrolldirectionLockThresholdeventPassthroughclickdblclick(v1.12.0+)tapbouncebounceTimemomentummomentumLimitTimemomentumLimitDi...
vue使用better-scroll实现菜单列表左右联动
07-13
而 Better-Scroll 是一个强大的滚动插件，它能帮助开发者在移动设备或者浏览器上实现高性能、易用的滚动效果。在本篇文章中，我们将深入探讨如何在 Vue 项目中利用 Better-Scroll 实现菜单列表的左右联动功能。 ...
详解 vue better-scroll滚动插件排坑
08-28
纵向滚动的实现可以通过使用 BetterScroll 来实现，下面是一个简单的示例代码： ```html <li v-for="item in 8">{{item}} import BScroll from 'better-scroll'; export default { mounted() { ...
Angular中使用better-scroll插件的方法
08-27
Angular中使用better-scroll插件的方法 Better-scroll是一个非常流行的滚动插件，Angular框架中使用better-scroll插件可以实现非常流畅的滚动体验。下面将详细介绍Angular中使用better-scroll插件的方法。 首先，...
Vue + better-scroll 实现移动端字母索引导航功能
08-27
Vue + better-scroll 实现移动端字母索引导航功能的要点是使用 better-scroll 实现滚动，并使用 Vue 实现列表渲染。首先，需要安装 Vue-cli 和 better-scroll，然后创建一个新的 Vue 项目，并将 better-scroll 安装...
vue中使用better-scroll实现滑动效果及注意事项
10-17
主要介绍了vue中使用better-scroll实现滑动效果，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
better-scroll的基本使用
热门推荐
Baby_加油_的博客
06-13 2万+
better-scroll是借鉴iscroll，是很牛的前端大神ustbhuangyi黄轶老师上传至github，并在教学视频中屡次运用的 github地址：https://github.com/ustbhuangyi/better-scroll 中文文档：Document 其方法、事件、属性等都可以去文档查找，做移动端的滑动非常好 1、使用better-scroll的基本条件 必须包...
better-scroll 实现无缝轮播
七元八元
07-11 3607
better-scroll  适用于解决移动端各种滚动场景，滚动列表、轮播图等。 better-scroll新版本设置轮播图有一些变动。 slider.vue： 结构及部分样式设置： &lt;div class="slider" ref="slider"&gt; &lt;div class="slider-group" ref="sliderGroup"&gt;
使用vue的better-scroll实现窗口内容，自动下拉到最底部
weixin_43566573的博客
11-22 1576
使用vue的better-scroll实现窗口内容，自动下拉到最底部使用scrollToElement()方法实现滚动 使用scrollToElement()方法实现滚动 <template> <div ref="container" style="overflow: hidden;"> <ul> <li></li> ...
(Vue2.0)在服务器返还数据中带有<img>标签时,用v-html渲染,better-scroll高度拉不到最底的问题
oxgos的博客
08-11 4387
Vue2.0 + better-scroll + Promise
解决Vue滑动插件Better-Scroll，卡顿，划不动的bug
weixin_45020094的博客
06-16 3462
bug原因： 因为Better-Scroll插件需要计算滑动的高度，如果页面图片较多，图片没有加载完成，滑动高度就已经计算出来，这个数据偏小，网速较快不会出现这个bu 解决方法： 每个图片加载完毕后，都让他重新计算滑动高度，最后算出来的高度就正确了 代码 使用 @load监听img标签 这样每次图片加载完毕，就会调用这个方法 <img :src="goodsItem.show.img" alt="" @load="imageLoad"> 获取到better-scroll的组件，
使用 better-scroll 页面不能点击
輕描淡寫的博客
09-20 4058
better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。   const options = { click: true, taps: true } this.scroll = new BScroll(th...
better-scroll在vue中实现原生滚动和上拉/下拉加载的效果
wangle_style的博客
04-03 5642
为了方便在VUE中的使用，可以把better-scroll抽化成一个组件，比如我抽化成了一个scroll组件，如下：&lt;template&gt;//ref="wrapper"不能更改  &lt;div ref="wrapper"&gt;//此处放加载异步加载的内容    &lt;slot name="header"&gt;&lt;/slot&gt;//此处为上拉后没有数据的时候显示
Vue中使用better-scroll所遇到的若干问题
南乔几经秋、的博客
12-24 1万+
在vue中使用better-scroll
滚动使用better-scroll来做
最新发布
05-29
好的，可以使用 better-scroll 来实现滚动效果。 better-scroll 是一款重点解决移动端滚动场景需求的插件。它可以轻松实现滚动、轮播等效果，支持横向和纵向滚动，提供了丰富的 API 和事件。 以下是一个使用 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值