uniapp上拉加载下拉刷新

标签：uniapp pagination pageSize 10 456 上拉 uni 加载

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 { onl oad, 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]
    });
    onl oad(() => {
      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>

　　

标签：uniapp,pagination,pageSize,10,456,上拉,uni,加载
From： https://www.cnblogs.com/zjxzhj/p/17631366.html