官方网站:https://better-scroll.github.io/docs/zh-CN/
优点:可以丝滑的滚动移动端的页面,让页面有弹簧效果,下拉刷新,上拉加载丝滑过渡
安装
npm install --save better-scroll
引入
import BetterScroll from 'better-scroll';
要点
1.VUE中基本使用
// 模板
<template>
<div class="home">
// 父盒子
<div class="wrapper" ref="wrapper">
// 第一个子盒子
<ul>
<li>假设有很多个li</li>
</ul>
// 第二个子盒子这里的滚动是不受控制的
<div>后面的都不会被影响</div>
</div>
</div>
</template>
// JS
<script>
import BetterScroll from 'better-scroll';
export default {
name: 'Home',
mounted() {
new BetterScroll('.wrapper');
let wrapper = document.querySelector('.wrapper');
new BetterScroll(wrapper);
let wrapper = this.$refs.wrapper;
new BetterScroll(wrapper);
}
}
</script>
// CSS
<style>
.wrapper {
// 设置高度
height: 200px;
// 超出隐藏
overflow: hidden;
// 背景颜色看效果
background-color: #f00;
}
</style>