插件//better-scroll(BScroll/滚动插件)使用方法及其在 vue 中使用

本文介绍了better-scroll,一个高性能的移动端滚动插件,无依赖且API设计兼容iscroll。详细讲解了BScroll的滚动原理,安装步骤及在Vue应用中的实践,包括如何在异步数据加载后正确初始化滚动插件。
摘要由CSDN通过智能技术生成

一、BScroll

BScroll是什么

better-scroll,受iscroll启发,它支持更多功能并具有更好的滚动性能
github上的插件原地址
BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。

滚动原理

content 高度 > 父容器高度,即可滚动。
在这里插入图片描述

安装

npm install better-scroll -S  # 安装带有所有插件的 BetterScroll

npm install @better-scroll/core # 核心滚动,大部分情况可能只需要一个简单的滚动
import BetterScroll from 'better-scroll'

let bs = new BetterScroll('.wrapper', {
   
  movable: true,
  zoom: true
})

import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {
   })

起步

<div class="wrapper">
  <ul class="content">
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值