uniapp上拉加载下拉刷新

page.json 配置

  {

      "path": "pages/my/index",

      "style": {

        "enablePullDownRefresh": true,//关键

        "onReachBottomDistance": 50,关键

        "app-plus":{

          "pullToRefresh":true

        },

        "navigationBarTitleText": "个人中心"

      }

    }

<template>
  <view v-for="num in state.list" :key="num">
    <view style="border: 1px solid red;height: 50px;">{{ num }}每刷新条数=={{ pagination.pageSize }}</view>
  </view>
</template>

<script lang="ts">
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';

import { defineComponent } from 'vue'

export default defineComponent({

  setup() {
    const pagination = reactive({
      pageSize:10,
      pageNum: 1,
    });//默认10
    const state = reactive({
      list: ['A', 'B', 'C', 'D', 'E', '1', 5, 5, 5, 6, 56, 456, 45, 6, 456, 5, 5, 5, 6, 56, 456, 45, 6, 456]
    });
    onLoad(() => {
      setTimeout(function () {
        uni.startPullDownRefresh();
      }, 1000);
    })
    onReachBottom(() => {
      pagination.pageSize+=10
      alert('上拉加载');
      uni.stopPullDownRefresh();
    })
    onPullDownRefresh(() => {
      console.log('refresh');
      setTimeout(function () {
        pagination.pageSize+=10
        alert("下拉刷新");
        uni.stopPullDownRefresh();

      }, 1000);
    })

    return {
      state,
      pagination
    }
  },
})
</script>


<style lang="scss" scoped></style>