npm install @better-scroll/core --save
地址:https://better-scroll.github.io/docs/zh-CN/guide/
用到了下拉,所以下载:
npm install @better-scroll/pull-up --save
注:达到临界值的时候,返回顶部显示,没有到隐藏
1)在使用的页面调用组件,页面的写法如下:
<!--
* @Author:
* @Date: 2020-10-18 15:02:55
* @LastEditors:
* @LastEditTime: 2020-10-18 18:18:20
* @FilePath: /attempt/src/pages/BetterScroll/Index.vue
* @Description:
-->
<template>
<div>
<scroll class="content" ref="scroll" @scroll="contentScroll">
<ul>
<!-- 这块好li -->
<li>列表1</li>
<li>列表2</li>
。。。。。。
</ul>
</scroll>
<!-- click.native 是监听组件的点击-->
<BackTop @click.native="backTop" v-show="show" />
</div>
</template>
<script>
import scroll from "@/components/common/scroll/Scroll.vue";
import BackTop from '@/components/common/backTop/BackTop.vue';
export default {
components: {
scroll,
BackTop
},
data(){
return {
show:false
}
},
methods: {
/**
* 回到顶部,在父里面通过ref取得子组件里面的方法
* (位置,位置,毫秒(指的是 在多少毫秒返回顶部))
*/
backTop() {
console.log("回到顶部");
this.$refs.scroll.scrollTo(0, 0, 500);
},
//
contentScroll(position){
console.log(position.y);
//打印出来是负的
this.show = - position.y > 700
}
},
}
</script>
<style scoped>
.content {
height: 100vh;
background: blueviolet;
overflow: hidden;
/* overflow: hidden;
overflow-y: scroll; */
}
</style>
2)封装BetterScroll的组件(这块是复用的),组件路径src/components/common/scroll/Scroll.vue
<!--
* @Author:
* @Date: 2020-10-18 17:02:23
* @LastEditors:
* @LastEditTime: 2020-10-18 18:13:39
* @FilePath: /attempt/src/components/common/scroll/Scroll.vue
* @Description:
-->
<template>
<!-- wrapper里面只有一个元素(同时 获取元素的时候,建议用ref),并且 要有固定高度 -->
<div class="wrapper" ref="bsWrapper">
<div class="content">
<!-- 在外面调用的时候,把所有的内容,都插入了进来,确保里面只包裹一个元素 -->
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from '@better-scroll/core';
//下拉
import Pullup from '@better-scroll/pull-up';
BScroll.use(Pullup)
export default {
data() {
return {
bscroll: null
}
},
// 取元素只能在mounted里(要不然会报null 或者 undefined)
mounted() {
// 1、常见BScroll对象
this.bscroll = new BScroll(this.$refs.bsWrapper, {
probeType: 3,//这里设置2 和 3的时候,实时监听,设置2的时候,惯性滚动不可以监听,3惯性滚动 也可以监听;0和1 什么都不监听 (这块可以考虑,从外面传入)
pullUpLoad: true,
click:true,//这个设置为true的时候,div才可以被点击
// scrollY: true,
// pullDownRefresh: true
})
// 2、监听
// 判断下拉距离的(需要用的时候,要传出去)
this.bscroll.on('scroll', (position) => {
// console.log(position);
this.$emit("scroll",position)
})
// 到底部(他没有 参数)
this.bscroll.on('pullingUp', () => {
console.log("你好");
})
// 返回顶部
this.bscroll.scrollTo(0, 0);
},
methods: {
/**
* @description: 给一个返回顶部的函数
*/
scrollTo(x, y, time = 400) {
this.bscroll.scrollTo(x, y, time);
}
},
}
</script>
<style scoped>
.wrapper {
height: 100%;
width: 100%;
}
</style>
3)封装一个返回的组件
<template>
<div class="backTop">
<button>回到<br />顶部</button>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.backTop{
position:fixed;
bottom:0;
right:0;
}
</style>
1)在页面调用组件
<template>
<div>
<scroll class="content" ref="scroll" @scroll="contentScroll" @pullingUp="loadMore">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
。。。。。。
</ul>
</scroll>
</div>
</template>
<script>
import scroll from "@/components/common/scroll/Scroll.vue";
export default {
components: {
scroll,
},
data(){
return {
show:false
}
},
methods: {
// 下拉
loadMore(){
console.log("上拉事件");
this.$refs.scroll.finishPullUp();
}
},
}
</script>
<style scoped>
.content {
height: 100vh;
background: blueviolet;
overflow: hidden;
/* overflow: hidden;
overflow-y: scroll; */
}
</style>
2)下拉组件的初步封装
注:防抖函数,在一般的情况下 用不到,在加载图片的时候,要使用。
<template>
<!-- wrapper里面只有一个元素(同时 获取元素的时候,建议用ref),并且 要有固定高度 -->
<div class="wrapper" ref="bsWrapper">
<div class="content">
<!-- 在外面调用的时候,把所有的内容,都插入了进来,确保里面只包裹一个元素 -->
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from '@better-scroll/core';
//下拉
import Pullup from '@better-scroll/pull-up';
BScroll.use(Pullup)
export default {
data() {
return {
bscroll: null
}
},
// 取元素只能在mounted里(要不然会报null 或者 undefined)
mounted() {
// 1、常见BScroll对象
this.bscroll = new BScroll(this.$refs.bsWrapper, {
probeType: 3,//这里设置2 和 3的时候,实时监听,设置2的时候,惯性滚动不可以监听,3惯性滚动 也可以监听;0和1 什么都不监听 (这块可以考虑,从外面传入)
pullUpLoad: true,//这个上拉加载,这里也尽量写成动态的
click:true,//这个设置为true的时候,div才可以被点击
// scrollY: true,
// pullDownRefresh: true
})
// 2、监听
// 判断下拉距离的(需要用的时候,要传出去)
this.bscroll.on('scroll', (position) => {
// console.log(position);
this.$emit("scroll",position)
})
// 到底部(他没有 参数)
this.bscroll.on('pullingUp', () => {
// console.log("上拉事件");
this.$emit("pullingUp");
})
//拿到 BScroll对象
console.log(this.bscroll);
},
methods: {
/**
* @description: 给一个返回顶部的函数
*/
scrollTo(x, y, time = 400) {
this.bscroll && this.bscroll.scrollTo(x, y, time);
},
/**
* @description: 这个是下拉下载的,如果在每次下拉完成后,不调用这个函数,他就没办法使用第二次
*/
finishPullUp(){
this.bscroll && this.bscroll.finishPullUp();
},
/**
* 但上面的这个 会产生一个bug,所以在数据加载完成,要调用一个函数(重新计算滚动高度)
* 监听图片加载完成 <img src="" alt="" onLoad="imgLoad" >
*
*/
refresh(){
let fun = this.bscroll && this.bscroll.refresh();
this.debounce(fun,500);
},
/**
* 函数防抖
* fun函数 传函数的时候,不要加括号
* delay等待多久
*
*/
debounce(fun,delay){
let time = null;
// 下面是一个闭包
return function(...args){
if(time) clearTimeout(time);
time = setTimeout(() => {
fun.apply(this,args);
},time);
}
}
},
}
</script>
<style scoped>
.wrapper {
height: 100%;
width: 100%;
}
</style>