前言

大家好，我是尤雨海。。。。。。

代码：

<template><div class="wrapper"><ul class="content"><p style="color: rgb(0, 26, 255); text-align: center" v-show="ispullDown">{{title }}</p><li v-for="(item, index) in data" :key="index">这是第{{item }}条数据</li><p style="color: rgb(0, 26, 255); text-align: center" v-show="ispullUp">{{title }}</p></ul></div></template><script>import BScroll from "better-scroll";export default {name: "HomeView",data() {return {/* 数据 */data: 30,/* 提示信息 */title: "刷新中，请稍后......",/* 控制顶部提示的显示与出现 */ispullDown: false,/* 控制底部提示的显示与出现 */ispullUp: false,/* 保存new出来的bscroll实例 */bs: null,};},created() {},mounted() {let wrapper = document.querySelector(".wrapper");this.bs = new BScroll(wrapper, {/* 配置纵向滚动 */scrollY: true,/* 配置下拉刷新 */pullDownRefresh: {threshold: 50,stop: 30,},/* 配置上拉加载 */pullUpLoad: {threshold: 50,},});/* 下拉刷新事件 */this.bs.on("pullingDown", this.pullDown);/* 上拉加载事件 */this.bs.on("pullingUp", this.pullUp);},methods: {/* 下拉刷新的事件方法 */pullDown() {this.title = "刷新中，请稍后......";this.ispullDown = true;/* 模拟请求数据 */const time = setTimeout(() => {this.title = "加载完成";this.bs.finishPullDown();this.data = 30;this.$nextTick(() => {this.bs.refresh();});const time1 = setTimeout(() => {this.ispullDown = false;clearTimeout(time);clearTimeout(time1);}, 1000);}, 2000);},/* 上拉加载的时间方法 */pullUp() {this.title = "加载，请稍后......";this.ispullUp = true;this.$nextTick(() => {this.bs.refresh();});/* 模拟请求数据 */const time = setTimeout(() => {this.title = "加载完成";this.bs.finishPullUp();this.data += 10;this.$nextTick(() => {this.bs.refresh();});this.ispullUp = false;}, 2000);},},components: {},};</script><style lang="scss" scoped>* {padding: 0;margin: 0;box-sizing: border-box;list-style: none;}.wrapper {width: 80%;height: 95vh;margin: 0 auto;border: 1px solid black;overflow: hidden;}.content {width: 100%;p {width: 100%;padding: 10px 0;}li {width: 100%;padding: 10px 0;border: 1px solid #ccc;}}</style>

附：better-scroll插件官网