下拉刷新

<template>
  <view class="tabnav">
    <scroll-view
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="refreshTrigged.freshbol"
      @refresherrefresh="refresherrefresh"
      refresher-background="#f6f6f6"
      lower-threshold="60"
      @scrolltolower="loadingMore"
      class="listArea"
    >
    <view style="border: 1px solid red; height: 200rpx;">打打巅峰</view>
    <view style="border: 1px solid red; height: 200rpx;">打打巅峰</view>
    <view style="border: 1px solid red; height: 200rpx;">打打巅峰</view>
    <view style="border: 1px solid red; height: 200rpx;">打打巅峰</view>
    <view style="border: 1px solid red; height: 200rpx;">打打巅峰</view>
    <view style="border: 1px solid red; height: 200rpx;">打打巅峰</view>
    <view style="border: 1px solid red; height: 200rpx;">打打巅峰</view>
  <view style="border: 1px solid red; height: 200rpx;">打打巅峰</view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
const listorder = reactive<any>({
  data: [],
  pageSize: 5,
  pageNum: 1,
  totalCount: 0,
  isLoading: false,
  hasMore: true, // 初始假设有更多数据
});
const refreshTrigged = reactive<any>({
  freshbol: false,
});
const refresherrefresh = () => {
  console.log('====================================');
  console.log(refreshTrigged,"refreshTrigged");
  console.log('====================================');
  if (refreshTrigged.freshbol) {
    return;
  }
  refreshTrigged.freshbol = true;
  listorder.pageNum = 0;
};
const loadingMore = () => {
  console.log("触底3333333333", listorder.hasMore);
  if (!listorder.hasMore) {
    return;
  }
  listorder.pageNum++;
};
</script>

<style scoped lang="scss">

</style>

  

posted @ 2024-07-11 10:45  zjxgdq  阅读(6)  评论(0编辑  收藏  举报