P165-Better-Scroll的安装和使用-用于重构项目滚动方面（PC端和移动端都适用）

最新推荐文章于 2024-06-17 18:01:15 发布
最新推荐文章于 2024-06-17 18:01:15 发布
阅读量588 收藏
点赞数
文章标签： css3 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51414342/article/details/121830837
版权

better-scroll是一款重点解决移动端（已支持PC端）各种滚动场景需求的插件。它的核心是借鉴iscroll实现的，并且是基于原生JS实现的，不依赖于任何框架，轻量级的

如何让去找一个开源框架最新的源码：如果官方网站没有，就去github,选择最新的Tag版本，找到里面的dist文件夹，例如在这里我们找到bscroll.js(bscroll.min.js是压缩的)，可以在项目里用script标签引用，bscroll.esm.js是用import模块化引用

我们这里采用npm来引用

 但是建议先别安装最新的版本，不太好用，这里安装1.13.2版本就好（貌似这个版本没了，所以用下面这个命令安装）

npm install better-scroll@1.15.2 --save

（相对应给一个卸载方式：npm uninstall better-scroll@1.15.2 --save    

或者npm uninstall better-scroll）

第一步：先去组件里import引入

最低0.47元/天 解锁文章
m0_51414342
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决better-scroll在PC端使用，鼠标无法实现滚动的问题
3w先生的博客
04-08 1321
在better-scroll的源码里面，有这样的一行代码； 接下来直接上代码： this.scroll = new BScroll(this.refs.scrollWrapper as Element, { scrollbar, probeType, click, scrollX, stopPropagation, eventPassthrough, pullDownRefresh: onFinishPullDown ? { threshold: 50,
better-scroll在PC端使用，鼠标无法实现滚动的解决办法
dwjdj的博客
12-26 1424
查阅了官方文档才知道，需要加一个属性才行 mouseWheel: true const bScroll=new BScroll(document.querySelector('.wrapper'),{ probeType:3, mouseWheel: true }); bScroll.on("scroll",(position)=>{ console.log(position); }) ...
js获取各种高度总结
热门推荐
leileibrother的博客
12-01 1万+
在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。 1，获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 2，获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight window.
better-scroll + fastclick 轮播图在pc端方案
xiaxuan1u的博客
09-27 197
轮播图结构是a标签包含img， 在pc端，当用鼠标滑动图片时，会自动打开a标签的链接？ 是不是这两个插件冲突？ 还是说 在滑动时 派发了click事件？ http://www.sofangche.com/jieban/show_178288.html http://www.sofangche.com/jieban/show_178304.html http://www.sofangche.com/jieban/show_178318.html http://www.sofangche.com/jieb
滚动条插件better-scroll的使用
m0_49515138的博客
01-18 549
它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。better-scroll是基于父元素固定高度，溢出才滚动的，所以父元素务必定高，否则无法滚动。官网：http://ustbhuangyi.github.io/better-scroll/
vue使用better-scroll实现菜单列表左右联动
07-13
例如，假设我们有 `menuScroll` 和 `contentScroll` 两个 Better-Scroll 实例，当菜单滚动时，我们可以更新内容列表的滚动位置： ```javascript <!-- 菜单列表 --> <!-- 内容列表 --> import BScroll...
vue2.0 better-scroll 实现移动端滑动的示例代码
08-28
Vue2.0 Better-Scroll 实现移动端滑动示例代码 本文主要介绍了使用 Vue2.0 和 Better-Scroll 实现移动端滑动的示例代码，着重于左右联动...通过本文，读者可以学习到 Better-Scroll 库的使用和 Vue2.0 框架的应用。
详解 vue better-scroll滚动插件排坑
08-28
BetterScroll 是一款移动端滚动插件，它的强大之处是解决移动端（已支持 PC）各种滚动场景需求的插件。BetterScroll 的核心是借鉴的 iScroll 的实现，它的 API 设计基本兼容 iScroll，在 iScroll 的基础上又扩展了...
微信小程序-scroll-view横向滚动和上拉加载
03-29
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display：i ...       最近刚好在集中scroll-view的文章和跳坑指南；  今天介绍微信小程序...
vue使用 better-scroll的参数和方法详解
08-28
在Vue.js应用中，Better-Scroll是一个非常实用的滚动插件，它提供了丰富的滚动效果和交互功能。在本文中，我们将深入探讨如何在Vue中使用Better-Scroll，以及它的主要参数和方法。 首先，要使用Better-Scroll，你...
better-scroll插件
milli236的博客
10-08 622
1. better-scroll 托管在 Npm 上，执行如下命令安装： npm install better-scroll --save 接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码： import BScroll from 'better-scroll' 2.所需页面引入。 {{ msg }}
better-scroll在vue项目中使用以及部分问题解决如在pc端鼠标滚轮无法滚动问题
蓝小白的博客
02-04 957
better-scroll better-scroll的GitHub地址: https://github.com/ustbhuangyi/better-scroll 安装 npm install better-scroll -S 使用 dom结构, 这个就是一个ul标签 列表结构 注意这个div的class名为 cinema 等会要把 better-scroll `挂载`到这个dom上 <div class="cinema"> <ul class="cinema-l
【Vue项目复习笔记】Bettter-Scroll的安装与使用
qq_40992225的博客
08-05 784
better-scroll是一款重点解决移动端 (已支持PC )各种滚动场景需求的插件。它的核心是借鉴的iscroll的实现，它的API设计基本兼容iscroll ，在iscroll的基础上又扩展了一些feature以及做了一些性能优化。better-scroll是基于原生JS实现的，不依赖任何框架。它编译后的代码大小是63kb，压缩后是35kb , gzip后仅有9kb,是一款非常轻量的JS lib。......
vue安装滚动插件 better-scroll
m0_52434369的博客
07-26 688
vue安装滚动插件 better-scroll
better-scroll
qq_38797977的博客
12-11 2056
better-scroll:npm 命令安装 npm install better-scroll –save官网：https://ustbhuangyi.github.io/better-scroll/doc/installation.html#npmgithub地址： https://github.com/ustbhuangyi/better-scroll运行命令行之前先在package.js
【已解决】better-scroll在PC端如何开启鼠标滚动以及如何始终显示滚动条
最新发布
无言非影的博客
06-17 489
需要安装插件 mouse-wheel 和 scrollbar
关于better-scroll的使用
qq_42931285的博客
05-22 383
better-scroll、页面滚动
下拉刷新上拉加载（Better-scroll）
CIA的博客
11-10 418
介绍 ​ better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。better-scroll 是基于原生 JS 实现的，不依赖任何框架。 http://ustbhuangyi.github.io/better-scroll/doc/api
better-scroll的安装和使用案例
qq_45031347的博客
03-17 1644
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、付费专栏及课程。

余额充值