关于vant 下拉加载,上拉刷新,使用关键点修复长列表跳转,自动滚动条置顶问题

前言

• 关于vant 下拉加载,上拉刷新,使用关键点
• 修复长列表跳转,自动滚动条置顶问题

PullRefresh下拉加载

• 滑动列表,误造成下载加载频繁触发.

  • 当scrollTop 大于1时禁止,触发下载加载
  • 封装复用Hooks方法

    // hooks.ts
    import { ref, nextTick } from 'vue'
  
    export const getScrollY = (className: string) => {
        const scrollY = ref(0)
        nextTick(() => {
          const oNode = document.querySelector(`.${className}`) as HTMLElement
          oNode.addEventListener('scroll', () => {
            scrollY.value = oNode.scrollTop
          })
        })
        return scrollY
     }
     
     // 调用
     <template>
          <pull-refresh v-model="refreshing" :disabled="scrollTop > 1" @refresh="()=>{}">
              <div class="list">
              </div>
          </pull-refresh>
     </template>
     <script lang="ts" setup>
     import { ref } from 'vue'
     import { getScrollY } from '@/utils/hooks'
     const scrollTop = ref(getScrollY('list'))
  
     </script>
  

  上拉刷新 List

  • immediate-check 初始化不加载
  • offset="50" 默认 300 设置50
  • loading=false 关闭加载 如果开启,内容距离底部未到 offset 会一直执行
  • finished 数据全部加载完毕 显示没有内容 文案

  <List 
      :immediate-check="false"
      offset="50"
      v-model:loading="loading"
      :finished="finished"
      @load="onLoad">
  </List>
  

组件缓存

 {
  path: 'info', //就是他
  name: 'Info',
  component: () => import('@/views/work/info.vue'),
  meta: { title: 'xxxx' }
 }
  <router-view v-slot="{ Component }" key="app">
    <keep-alive :include="['info', 'group', 'groupList']">
      <component :is="Component" />
    </keep-alive>
  </router-view>

记录跳转位置

• 因为组件被缓存 hooks记录实时Y,当在返回时继续读取这个变量
• A-B-C ABC都被环境情况下,scrollTop都是被缓存记录
• 只需要在返回时重新读取这个变量并赋值

import { ref, nextTick, onActivated } from 'vue'
  export const getScrollY = (className: string) => {
      const scrollY = ref(0)
      nextTick(() => {
        const oNode = document.querySelector(`.${className}`) as HTMLElement
        oNode.addEventListener('scroll', () => {
          scrollY.value = oNode.scrollTop
        })
      })
      onActivated(() => {
        const oNode = document.querySelector(`.${className}`) as HTMLElement
        oNode.scrollTop = scrollY.value
      })
      return scrollY
   }