@hzy1123581324/z-view-ui/hooks/paginate.js

z-view-ui是使用vue3开发的组件，开发中,有部分组件功能未实现,慎用

import { onShow,onReachBottom,onHide,onReady,onPullDownRefresh } from "@dcloudio/uni-app";
import {ref, reactive,watch} from "vue";

const targetFunc = ()=>{
  console.warn('targetFunc 是分页接口函数')
  console.warn('targetFunc 是分页接口函数')
  console.warn('targetFunc 是分页接口函数')
  console.warn('targetFunc 是分页接口函数')
  console.warn('targetFunc 是分页接口函数')
  
  console.warn('接口内部使用setData 方法 更新数据')
  return new Promise()
}
/**
 * @description  分页生命周期
 * @return 
 */
export const usePaginate = ({onShowRefresh = 1, pageInit = 1,limitInit = 10,targetFunc,scrolltolowerBefore = ()=>true }={})=>{
  // onShowRefresh  0 onshow 不刷新 1 onshow 刷新 2 onshow 第一次 不刷新以后每次都刷新 3 只在页面初始加载onready时加载一次，onshow都不加载
  let ishide = false;
  let page = ref(pageInit);
  let limit = ref(limitInit);
  let hasmore = ref(true);
  // let state = false;
  let paginateList = reactive([]);
  
  /**
   * @description 更新数据
   * @param {Array} list 要更新的数组
   * @param {Number} currentPage  当前页数
   */
  function setData(list , currentPage = page.value){
    let start = (currentPage - 1) *  limit.value;
    let len = limit.value;
    if(currentPage == pageInit){
      len = paginateList.length;
    }
    paginateList.splice(start,len,...list);
    console.log(paginateList,'&&&&&&&&');
  }
  /**
   * @description 更新某一页数据
   * @param {Array} list 要更新的数组
   * @param {Number} currentPage  当前页数
   */
  function updateData(list,currentPage = page.value){
    let start = (currentPage - 1) *  limit.value;
    paginateList.splice(start,limit.value,...list);
  }
  
  /**
   * @description 更新数据
   * @param {Array} total 总条数
   * @param {Number} currentPage  当前页数
   */
  function isHasmore(total,currentPage){
    currentPage||(currentPage = page.value);
    hasmore.value = total > currentPage * limit.value;
    console.log(hasmore,"是否还有更多")
    return hasmore.value;
  }
  
  function refresh(){
    page.value = 1;
    hasmore.value = true
    // state = true;
    return targetFunc();
  }
  
  // 滚动到底部 使用scroll-view 时用到
  function scrolltolower(){
    if (process.env.NODE_ENV === 'development') { // 开发环境
      console.warn("触底了++++++++++");
    }
    if(hasmore.value&&scrolltolowerBefore()){
      page.value ++;
      targetFunc();
    }
  }
  
  onReachBottom(scrolltolower);
  
  onPullDownRefresh(()=>{
    if(onShowRefresh==1||(onShowRefresh == 2 && ishide == true)){
      ishide = false;
      refresh().finally(()=>{
        uni.stopPullDownRefresh()
      }).catch(err=>{
        console.log(err)
      });
    }
  })
  
  onShow(() => {
    if(onShowRefresh==1||(onShowRefresh == 2 && ishide == true)){
      ishide = false;
      refresh();
    }
  });
  
  onReady(()=>{
    if(onShowRefresh==3){
      ishide = false;
      refresh();
    }
  })
  
  onHide(()=>{
    ishide = true;
  });
  
  return {
    page,
    limit,
    hasmore,
    paginateList,
    targetFunc,
    setData,
    updateData,
    isHasmore,
    scrolltolower,
    refresh
  }
}


/**
 * @description 分页生命周期 一个页面有多个分页
 * @param {String|Number} onShowRefresh 总数据条数
 * @param {Boolean} isWatch 是否监听activeindex 下标的变化 ， true ,监听，刷新，false 不处理
 * @param {Number} limitInit 每页的条数
 * @param {Number} pageInit 页数初始值
 * 
 */
export const useListPaginate = ({targetFunc,length,onShowRefresh = 1,pageInit=1,limitInit = 10,isWatch = false,scrolltolowerBefore = ()=>true }={})=>{
  // let pageList = reactive(pageInit.toString().repeat(length).split(""));
  // let limitList = reactive(limitInit.toString().repeat(length).split(""));
  // let hasmoreList = reactive(true);
  // let activeIndex = ref(0);
  // let paginateList = reactive([]);
  
  
  // onShowRefresh  0 onshow 不刷新 1 onshow 刷新 2 onshow 第一次 不刷新以后每次都刷新 3 只在页面初始加载onready时加载一次，onshow都不加载
  let ishide = false;
  let pageList = reactive([]);
  let limitList = reactive([]);
  let hasmoreList = reactive([]);
  let activeIndex = ref(0);
  let paginateList = reactive([]);
  function lengthChange(length){
    // let pageList = reactive(pageInit.toString().repeat(length).split(""));
    // let limitList = reactive(limitInit.toString().repeat(length).split(""));
    // let hasmoreList = reactive(true);
    // let activeIndex = ref(0);
    // let paginateList = reactive([]);
    pageList.length = length;
    limitList.length = length;
    hasmoreList.length = length;
    paginateList.length = length;
    
    // for(let i=0;i<length;i++){
    //   if(pageList[i]!=pageInit){
    //     pageList[i] = pageInit;
    //   }
    //   pageList[i] =  (0,pageList.length,)
    // }
  }
  /**
   * @description 更新数据
   * @param {Array} list 要更新的数组
   * @param {Number} currentIndex 当前展示的数组下标
   * @param {Number} currentPage  当前页数
   * @param {Number} limit  每页的条数
   */
  function setData(list,currentIndex = activeIndex.value, currentPage,){
    currentPage||(currentPage = pageList[currentIndex]);
    limitList[currentPage]||(limitList[currentPage] = limitInit)
    let start = (currentPage - 1) *  limitList[currentPage];
    let len = limitList[currentPage];
    paginateList[currentIndex]||(paginateList[currentIndex]=[])
    if(currentPage == pageInit){
      len = paginateList[currentIndex].length;
    }
    paginateList[currentIndex].splice(start,len,...list);
    console.log(paginateList,'&&&&&&&&');
  }
  

  /**
   * @description 更新某一页数据
   * @param {Array} list 要更新的数组
   * @param {Number} currentIndex 当前展示的数组下标
   * @param {Number} currentPage  当前页数
   * @param {Number} limit  每页的条数
   */
  function updateData(list,currentIndex = activeIndex.value, currentPage,){
    currentPage||(currentPage = pageList[currentIndex]);
    limitList[currentPage]||(limitList[currentPage] = limitInit)
    let start = (currentPage - 1) *  limitList[currentPage];
    paginateList[currentIndex]||(paginateList[currentIndex]=[])
    paginateList[currentIndex].splice(start,limitList[currentPage],...list);
    console.log(paginateList,'&&&&&&&&');
  }

  /**
   * @description 判断是否还有更多数据
   * @param {String|Number} total 总数据条数
   * @param {Number} currentPage 当前页数
   * @returns {Boolean} 是否还有更多
   */
  function isHasmore(total,currentIndex = activeIndex.value, currentPage,){
    currentPage||(currentPage = pageList[currentIndex]);
    limitList[currentPage]||(limitList[currentPage] = limitInit)
    hasmoreList[currentIndex] = total > currentPage * limitList[currentPage];
    console.log(hasmoreList,"是否还有更多")
    return hasmoreList;
  }
  
  // 滚动到底部 使用scroll-view 时用到
  function scrolltolower(index){
    console.log(index,'8888891234108237410293847')
    index||(index = activeIndex.value);
    isNaN(index)&&(index = activeIndex.value);
    if (process.env.NODE_ENV === 'development') { // 开发环境
      console.warn("触底了++++++++++"+index);
      console.log(hasmoreList[index]);
    }
    if(hasmoreList[index]&&scrolltolowerBefore()){
      pageList[index]++;
      targetFunc(index);
    }
  }
  function refresh(index = activeIndex.value){
      console.log('开始调接口了');
      pageList[index] = 1;
      hasmoreList[index] = true;
      limitList[index] = limitInit;
      return targetFunc(index);
  }
  
  onReachBottom(scrolltolower);
  
  onPullDownRefresh(()=>{
    if(onShowRefresh==1||(onShowRefresh == 2 && ishide == true)){
      ishide = false;
      refresh().finally(()=>{
        uni.stopPullDownRefresh()
      }).catch(err=>{
        console.log(err)
      });
    }
  })
  onShow(() => {
    
    if(onShowRefresh==1||(onShowRefresh == 2 && ishide == true)){
      ishide = false;
      console.log("1234");
      refresh();
    }
  });
  onReady(()=>{
    if(onShowRefresh==3){
      ishide = false;
      refresh();
    }
  })
  onHide(()=>{
    ishide = true;
  });
  watch(activeIndex,(newval,oldval)=>{
    console.log(newval,newval.value,'分页++++++')
    isWatch&&newval>-1&&refresh();
  })
  return {
    pageList,
    limitList,
    hasmoreList,
    paginateList,
    targetFunc,
    setData,
    updateData,
    isHasmore,
    activeIndex,
    scrolltolower,
    refresh
  }
}