在vue项目中使用better-scroll

本文介绍了BetterScroll插件的安装及使用方法。通过npm安装并导入到项目中,在组件中定义好DOM结构即可实现流畅的滚动效果。适用于移动端和PC端应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

better-scroll是一个在移动端和pc端都适用的滚动场景需求的插件,是基于原生的js实现,不依赖任何框架。

1、安装better-scroll

npm install --save better-scroll

安装完成后在package.json文件中的dependecies中会显示安装的插件;

2、在组件中引入插件

import BScroll from "better-scroll";

组件中dom结构:

<div id="wrap">
<div class="content"></div>
</div>

 其中第一层div给一个高度来显示屏幕上可视的div高度,第二层div高度一定要比第一层div的高度要高;

mounted: function () {
    var wrapper = new BScroll('#wrap');
  }

到这里可以出现滚动效果了!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值