uni小程序上拉加载下拉刷新实现

vue3+TS+uni小程序实现上拉加载下拉刷新

话不多说直接上代码

index.vue

<template>
	<view class="list-wrap">
	      <view class="club-posts-list-container" v-if="list.length && list.length > 0">
	        <view class="club-posts-list">
	          <posts_item v-for="(item, index) in list" :key="item.postsId" :detail="item.content" :index="index" />
	        </view>
	        <uni-load-more
	          :status="isLoaded ? 'noMore' : loading ? 'loading' : 'more'"
	          iconType="circle"
	          :iconSize="16"
	          color="#999999"
	        />
	      </view>
	</view>
</template>

<script lang="ts">
  import { defineComponent, ref, toRefs, onMounted } from 'vue'
  import { useRecommendPosts } from '@/pages/home/hook/useRecommendTopic'
  import { onPullDownRefresh } from '@dcloudio/uni-app'
  export default defineComponent({
    name: 'Index',
    setup() {
      const { clubPostsListData, getTopicPostsList, reloadHomeData } = useRecommendPosts()
      onMounted(() => {
        getTopicPostsList()
      })
      onPullDownRefresh(() => {
        reloadHomeData()
      })
      return {
        ...toRefs(clubPostsListData)
      }
    },
    // 触底加载
    onReachBottom() {
      this.getTopicPostsList()
    }
  })
</script>

useRecommendTopic.ts

import { reactive } from 'vue'
import { ClubPostsListResType, getIndexRecPostsList as getIndexRecPostsListApi } from '@/http/modules/clubPost'
// import { useGetters } from '@/store/use'

// 列表数据
interface ClubPostsListData<T> {
  list: Array<T>
  total: number
  isLoaded: boolean
  currentPage: number
  size: number
  loading: boolean
  activeId: number
}

interface Result {
  clubPostsListData: ClubPostsListData<ClubPostsListResType>
  reloadHomeData: (type: number, callBack?: Function) => void
  getTopicPostsList: (callBack?: Function) => Promise<void>
}

export const useRecommendPosts = (): Result => {
  // const storeGetters = useGetters('basic', ['appletInfo'])

  // 帖子数据定义
  const clubPostsListData = reactive<any>({
    list: [], // 帖子列表
    total: 0, // 总数
    isLoaded: false, // 是否加载完成
    currentPage: 1, // 当前页
    size: 10, // 每页数据
    loading: false, // 是否正在加载
    activeId: 0 // 当前帖子列表所在tab 0最新 ｜ 1精华
  })

  // 获取话题对应帖子列表
  const getTopicPostsList = async (callBack?: Function): Promise<void> => {
    try {
      if (clubPostsListData.isLoaded) return
      clubPostsListData.loading = true
      const { code, data } = await getIndexRecPostsListApi({
        userId: '1069',
        page: clubPostsListData.currentPage,
        pageSize: clubPostsListData.size
      })
      if (code !== 10000) return
      clubPostsListData.list = [...clubPostsListData.list, ...data.items]
      clubPostsListData.total = data.total
      clubPostsListData.loading = false
      /**
      	*控制是否加载完成
      	*/
      if (clubPostsListData.currentPage * clubPostsListData.size >= data.total) {
        clubPostsListData.isLoaded = true
      } else {
        clubPostsListData.currentPage++
      }
      callBack && callBack()
    } catch (error) {
      console.log(error)
    }
  }

  // 重新加载列表数据(下拉刷新或者首次加载的时候可以用)
  const reloadHomeData = (type: number, callBack?: Function): void => {
    clubPostsListData.activeId = type
    clubPostsListData.list = []
    clubPostsListData.total = 0
    clubPostsListData.isLoaded = false
    clubPostsListData.currentPage = 1
    clubPostsListData.size = 10
    clubPostsListData.loading = false
    callBack ? getTopicPostsList(callBack) : getTopicPostsList()
  }
  
	/**
	*把页面中要用的数据可方法return出去
	*/

  return {
    clubPostsListData,
    getTopicPostsList,
    reloadHomeData
  }
}