首先下載插件better-scroll,命令：npm i better-scroll --save
引入：import BScroll from "better-scroll";
代碼如下，效果圖見文首：
<template>
<div>
<div class="box"></div>
<!-- ........... -->
<div class="wrapper left" ref="wrapper">
<div class="bscroll-container">
<!-- 刷新提示信息 -->
<div class="top-tip">
<span class="refresh-hook">{{pulldownMsg}}</span>
</div>
<!-- 內容列表..........-->
<ul class="content">
<li v-for="item in data" :key="item" id="aaa">{{item}}</li>
</ul>
<!-- 底部提示信息........... -->
<div class="bottom-tip">
<span class="loading-hook">{{pullupMsg}}</span>
</div>
</div>
</div>
<!-- ............ -->
</div>
</template>
<script>
import BScroll from "better-scroll";
// let count = 1;
export default {
name: "Z",
data() {
return {
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
pulldownMsg: "下拉刷新 ",
pullupMsg: "加載更多 "
};
},
mounted() {
const that = this;
// 創建Better-Scroll對象
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: 1, //滾動的時候會派發scroll事件，會節流
click: true //派發click事件
});
// //滑動結束松開事件
this.scroll.on("touchEnd", pos => {
//上拉刷新
if (pos.y > 200) {
setTimeout(() => {
this.pulldownMsg = " ";
this.scroll.refresh(); //重新計算高度
}, 2000);
} else if (pos.y < this.scroll.maxScrollY - 200) {
this.pullupMsg = " ";
}
});
}
};
</script>
<style scoped>
.box {
width: 100%;
height: 40px;
background: #000;
}
.wrapper {
width: 20%;
height: 500px;
background: rgb(245, 247, 249);
overflow: hidden;
position: relative;
}
#aaa {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
/* 下拉、上拉提示信息 */
.top-tip {
position: absolute;
top: -40px;
left: 0;
z-index: 1;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
color: #555;
}
.bottom-tip {
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
color: #777;
position: absolute;
bottom: -35px;
left: 0;
}
</style>