一. 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
})
}