Kaynağa Gözat

解决滚动偶尔卡住情况

凉纪 2 yıl önce
ebeveyn
işleme
4c85b8fc8c
2 değiştirilmiş dosya ile 19 ekleme ve 10 silme
  1. 13 4
      src/components/scroll/scroll.vue
  2. 6 6
      src/router/router.config.js

+ 13 - 4
src/components/scroll/scroll.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="scrollWrapper" class="scroll-wrapper">
+  <div ref="scrollWrapper"  class="scroll-wrapper">
     <div ref="scrollContent" class="scroll-content">
       <!-- 这里放置你的内容,例如下拉刷新和上拉加载的内容 -->
       <!-- 下拉刷新区域 -->
@@ -87,7 +87,8 @@ export default {
     },
     // 初始化 better-scroll
     initScroll() {
-      this.bs = new BScroll(this.$refs.scrollWrapper, {
+      let el = this.$refs.scrollWrapper;
+      this.bs = new BScroll(el, {
         probeType: 3, // 1: 滚动时派发scroll事件 2: 滚动时派发scroll事件,每隔一定时间派发一次 3: 每隔一定时间派发scroll事件
         click: true, // 允许点击
         pullDownRefresh: {
@@ -97,7 +98,7 @@ export default {
           threshold: -50, // 上拉加载的触发距离
         },
       });
-
+      console.log(this.bs,'初始化成功')
       // 监听下拉刷新事件
       this.bs.on('pullingDown', this.pullingDownHandler);
       // 监听上拉加载事件
@@ -166,10 +167,18 @@ export default {
       this.showLoadMoreText = false;
     },
   },
-  destroyed() {
+  beforeDestroy() {
     // 销毁 better-scroll
     this.bs.destroy();
+    this.bs = null;
+    console.log(this.bs,'销毁')
   },
+  // destroyed() {
+  //   // 销毁 better-scroll
+  //   this.bs.destroy();
+  //   this.bs = null;
+  //   console.log(this.bs,'销毁')
+  // },
 };
 </script>
 

+ 6 - 6
src/router/router.config.js

@@ -131,6 +131,12 @@ export let routers = [
         meta: { title: '我的', keepAlive: true }
       },
       {
+        path: '/message',
+        name: 'message',
+        component: () => import('@/views/menu/message/index'),
+        meta: { title: '消息中心', keepAlive: false }
+      },
+      {
         path: '/workTime',
         name: 'workTime',
         component: () => import('@/views/menu/workTime/index'),
@@ -233,12 +239,6 @@ export let routers = [
         meta: { title: '隐患问题详情', keepAlive: false }
       },
       {
-        path: '/message',
-        name: 'message',
-        component: () => import('@/views/menu/message/index'),
-        meta: { title: '消息中心', keepAlive: false }
-      },
-      {
         path: '/resumption',
         name: 'resumption',
         component: () => import('@/views/menu/resumption/list.vue'),