修改滚动组件

src/api/public.js

@@ -156,3 +156,4 @@ export function handsheDeptTreeSelect() {
     method: 'get'
   })
 }
+

src/components/scroll/scroll.vue

@@ -1,242 +1,158 @@
 <template>
-  <div ref="wrapper" class="better-scroll">
-    <div class="content">
-      <div v-if="pulldown" class="pulldown-tip">
-        <span>{{pulldownTip.text}}</span>
+  <div ref="scrollWrapper" class="scroll-wrapper">
+    <div ref="scrollContent" class="scroll-content">
+      <!-- 这里放置你的内容，例如下拉刷新和上拉加载的内容 -->
+      <!-- 下拉刷新区域 -->
+      <div v-if="pullupDown" class="refresh-wrapper">
+          {{ refreshText }}
       </div>
-      <div class="list">
+
+      <!-- 内容区域 -->
+      <div class="content">
         <slot></slot>
       </div>
-      <div v-if="pullupShow" class="pullup-tip">
-        <span>{{pullupTip.text}}</span>
+
+      <!-- 上拉加载更多区域 -->
+      <div v-if="pullupUp" class="load-more-wrapper" v-show="showLoadMoreText">
+        <div class="load-more-indicator">
+          {{ loadMoreText }}
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import BScroll from 'better-scroll'
-    export default {
-      name: "scroll",
-      props: {
-        // 滚动的时候会触发scroll事件，会截流
-        // 滚动的时候实时触发scroll事件，不会截流
-        // 在swipe的情况下也能使用scroll事件
-        probeType: {
-          type: Number,
-          default: 3
-        },
-        //点击列表触发click事件
-        click: {
-          type: Boolean,
-          default: true
-        },
-         //开启横向滚动
-        scrollX: {
-          type: Boolean,
-          default: false
-        },
-        //滚动事件
-        listenScroll: {
-          type: Boolean,
-          default: false
-        },
-        //列表数据
-        data: {
-          type: Array,
-          default: null,
-        },
-        //滚动到底部事件，用于上拉加载
-        pullup: {
-          type: Boolean,
-          default: true
-        },
-        //顶部下拉事件，用于下拉刷新
-        pulldown: {
-          type: Boolean,
-          default: true
-        },
-        //列表滚动事件
-        beforeScroll: {
-          type: Boolean,
-          default: false
-        },
-        //刷新scroll延时。
-        refreshDelay: {
-          type: Number,
-          default: 20
+import BScroll from 'better-scroll';
+
+export default {
+  props: {
+    pullupDown: {
+      type: Boolean,
+      default: true,
+    },
+    pullupUp: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示加载更多
+    showLoadMore: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      bs: null, // better-scroll 实例
+      isRefreshing: false, // 是否正在刷新
+      isLoadingMore: false, // 是否正在加载更多
+      showLoadMoreText: false, // 是否显示加载更多
+      refreshText: '下拉刷新', // 刷新文本
+      loadMoreText: '加载更多', // 加载更多文本
+    };
+  },
+  mounted() {
+    // 初始化 better-scroll
+    this.initScroll();
+  },
+  methods: {
+    // 初始化 better-scroll
+    initScroll() {
+      this.bs = new BScroll(this.$refs.scrollWrapper, {
+        probeType: 3, // 1: 滚动时派发scroll事件 2: 滚动时派发scroll事件，每隔一定时间派发一次 3: 每隔一定时间派发scroll事件
+        click: true, // 允许点击
+        pullDownRefresh: {
+          threshold: 50, // 下拉刷新的触发距离
         },
-      },
-      data(){
-        return{
-          loadingConnecting: false,
-          pullupShow:false,
-          pulldownTip: {
-            text: '下拉刷新',
-          },
-          pullupTip: {
-            text: '上拉加载',
-          },
-        }
-      },
-      mounted() {
-          this.initScroll();
-      },
-      watch: {
-        pullup(v){
-          console.log(v,'监听pullup事件')
-          //this.pullup = v;
+        pullUpLoad: {
+          threshold: -50, // 上拉加载的触发距离
         },
-        data(v) {
+      });
+
+      if(this.pullupDown){
+        // 监听下拉刷新事件
+        this.bs.on('pullingDown', () => {
+          this.isRefreshing = true;
+          this.refreshText = '正在刷新';
+          this.$emit('refresh');
+          // 这里可以执行刷新操作，例如发送请求获取数据
+          // 刷新完成后，调用 this.refreshFinish() 结束刷新
           setTimeout(() => {
-            this.refresh()
-          }, this.refreshDelay)
-        }
-      },
-      methods: {
-        initScroll() {
-          if (!this.$refs.wrapper) {
-            return;
-          }
-          // better-scroll的初始化
-          this.scroll = new BScroll(this.$refs.wrapper, {
-            probeType: this.probeType,
-            click: this.click,
-            scrollX: this.scrollX
-          });
+            this.refreshFinish();
+          }, 300);
+        });
+      }
 
-          // 是否触发滚动事件
-          if (this.listenScroll || this.pulldown || this.pullup) {
-            //监听滚动事件
-            this.scroll.on('scroll', (pos) => {
-              if (this.listenScroll) {
-                this.$emit('scroll', pos);
-              }
-              // 下拉刷新
-              if (this.pulldown) {
-                if (pos.y > 50) {
-                  this.pulldownTip = {
-                    text: '松开立即刷新',
-                  }
-                } else {
-                  this.pulldownTip = {
-                    text: '下拉刷新',
-                  }
-                }
-              }
+      if(this.pullupUp){
+        // 监听上拉加载事件
+        this.bs.on('pullingUp', () => {
+          this.showLoadMoreText = true;
+          this.loadMoreText = '正在加载...';
+          this.$emit('loadMore');
+          // 这里可以执行加载更多操作，例如发送请求获取数据
+          // 加载完成后，调用 this.loadMoreFinish() 结束加载更多
+          setTimeout(() => {
+            this.loadMoreFinish();
+          }, 500);
+        });
+      }
+      // better-scroll 初始化完成后，刷新 scroll
+      this.bs.refresh();
+    },
 
-              //上拉加载
-              if (this.pullup) {
-                if (pos.y < (this.scroll.maxScrollY + -50)) {
-                  this.pullupTip = {
-                    text: '加载中..',
-                  };
-                }else {
-                  this.pullupTip = {
-                    text: '上拉加载',
-                  };
-                }
-                this.pullupShow = true;
-              }
+    // 结束下拉刷新
+    refreshFinish() {
+      this.isRefreshing = false;
+      this.refreshText = '下拉刷新';
+      this.bs.finishPullDown(); //  刷新完成
+      this.bs.refresh(); // 重新计算高度
+    },
 
-            })
-          }
-          console.log(this.pullup,'pullup')
-          // 底部上拉事件，上拉加载
-          if (this.pullup) {
-            this.scroll.on('touchEnd', (pos) => {
+    // 结束上拉加载更多
+    loadMoreFinish() {
+      this.showLoadMoreText = false;
+      this.loadMoreText = '加载更多';
+      this.bs.finishPullUp(); //  加载更多完成
+    },
+  },
+};
+</script>
 
-              // 下拉动作
-              if (pos.y < -40) {
-                // this.pullupTip = {
-                //   text: '111',     // 松开立即刷新
-                // };
-                console.log('上拉加载,touchEnd')
-                this.$emit('pullup');
-              }
-            });
-          }
+<style lang="scss" scoped>
+.scroll-wrapper {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.scroll-content {
+  position: absolute;
+  width: 100%;
+}
+
+.refresh-wrapper {
+  position: absolute;
+  top: -80px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 80px;
+  line-height: 80px;
+  font-size: 14px;
+  color: #666;
+}
+
+.load-more-wrapper {
+  text-align: center;
+  height: 80px;
+  line-height: 80px;
+  font-size: 14px;
+  color: #666;
+}
 
-          //顶部下拉事件，下拉刷新
-          if (this.pulldown) {
-            this.scroll.on('touchEnd', (pos) => {
-              // 下拉动作
-              if (pos.y > 50) {
-                // 重置提示信息
-                // this.pulldownTip = {
-                //   text: '222',     // 松开立即刷新
-                // };
-                console.log('下拉刷新,touchEnd')
-                this.$emit('pulldown');
-              }
-            });
-          }
 
-          // 是否派发列表滚动开始的事件
-          if (this.beforeScroll) {
-            this.scroll.on('beforeScrollStart', () => {
-              this.$emit('beforeScroll')
-            });
-          }
-        },
-        disable() {
-          // 代理better-scroll的disable方法
-          this.scroll && this.scroll.disable();
-        },
-        enable() {
-          // 代理better-scroll的enable方法
-          this.scroll && this.scroll.enable();
-        },
-        refresh() {
-          // 代理better-scroll的refresh方法
-          this.scroll && this.scroll.refresh();
-        },
-        scrollTo() {
-          // 代理better-scroll的scrollTo方法
-          this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
-        },
-        scrollToElement() {
-          // 代理better-scroll的scrollToElement方法
-          this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
-        }
-      },
-    }
-</script>
-<style lang="scss">
-  .better-scroll{
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    .content {
-      min-height: calc(100% + 1px);
-      border-top: 1px solid #f2f2f2;
-      overflow: auto;
-    }
-    .list{
-      overflow: auto;
-    }
-    .pulldown-tip {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      top: -80px;
-      height: 80px;
-      line-height: 80px;
-      color: #bbb;
-      font-size: 3.5vw;
-      z-index: 1;
-    }
-    .pullup-tip{
-      box-sizing: border-box;
-      line-height: 80px;
-      width: 100%;
-      color: #bbb;
-      font-size: 3.5vw;
-      text-align: center;
-      margin: 0 auto;
-    }
 
-  }
 </style>

src/views/menu/message/api.js

@@ -1,4 +1,5 @@
 import request from "@/utils/request";
+import day from 'dayjs'
 //获取消息列表
 export function dataList(params) {
   return request({
@@ -16,3 +17,5 @@ export function msgList(data){
   });
 }
 
+
+

src/views/menu/message/index.vue

@@ -2,19 +2,16 @@
 <div class="message">
   <NavBar v-show="!show" />
   <div v-if="!show" class="page-container">
-    <van-tabs v-model="query.type" @change="changeList">
+    <van-tabs v-model="query.type" @change="refreshData">
       <van-tab title="公告/通知" name="1"></van-tab>
       <van-tab title="业务提醒" name="2"></van-tab>
       <van-tab title="消息" name="3"></van-tab>
     </van-tabs>
     <div class="card-list">
-      <van-empty description="暂无数据" v-if="!dataList || dataList.length === 0" />
+<!--      <van-empty description="暂无数据" v-if="!dataList || dataList.length === 0" />-->
       <Scroll
-        v-else
-        @pulldown="refreshData"
-        @pullup="getDataList"
-        :data='dataList'
-        :pullup="pullup"
+        @refresh="refreshData"
+        @loadMore="getDataList"
         class="wrapper"
         ref="wrapper">
         <van-cell-group  v-for="(v,i) in dataList">
@@ -53,8 +50,9 @@
 <script>
 import NavBar from '@/components/NavBar'
 import Scroll from '@/components/scroll/scroll'
-import {msgList,dataList} from './api'
+import {msgList,dataList,Msg} from './api'
 import {mapGetters} from "vuex";
+import day from "dayjs";
 export default {
   components: {
     NavBar,
@@ -68,9 +66,10 @@ export default {
       query:{
         type:1,
         pageNum:1,
-        pageSize:10,
+        pageSize:1,
       },
       pullup:false,
+      message:null,
     };
   },
   computed:{
@@ -88,9 +87,6 @@ export default {
       this.show = true;
     },
     refreshData(){
-      this.getDataList();
-    },
-    changeList(v,type){
       this.query.pageNum = 1;
       this.dataList = []
       this.getDataList();
@@ -105,7 +101,13 @@ export default {
           tagRoleIds:this.roleList.map(v=>{return v.roleId}),
         }
         msgList(data).then(res=>{
-          this.dataList = res.rows;
+          if(this.dataList.length < res.total) {
+            this.dataList = [...this.dataList,...res.rows] ;
+            this.pullup = true;
+            this.query.pageNum++;
+          }else {
+            this.pullup = false;
+          }
         })
         return;
       }