插件使用

72 阅读1分钟

一. better-scroll的使用

BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

滚动条件:

1.滚动容器要有高度; 滚动内容也要有高度

2.且滚动内容的高度要大于滚动容器的高度

3.初始化: new Bscroll ('滚动容器', { //配置项目 })

获取dom容器与内容的高度

// dom节点
<div class="goodsPage_left" id="leftbox" ref="wrapper_left">

// 查看滚动容器是否有高度
console.log(this.$refs.wrapper_left);
console.log(document.getElementById('leftbox').offsetHeight);

安装与基本使用

1.安装 npm install better-scroll --save

2.引用 (在要使用的页面引入)

import BScroll from 'better-scroll'

3.在mounted函数中来创建BScroll对象

// 防止重复渲染
        if (this.scroll == null) {
            this.scroll = new Bscroll(this.$refs.wrapper_left, {
                click: true
            })
        }

image.png