vue3代码生成器
uniapp-vue3-前端项目包下载
php-vue3-后端项目包下载
列表分页
Basic
列表分页
列表分页
代码片段1
复制
代码片段2
复制
代码片段3
复制
代码片段4
复制
import { ref, onMounted, watch, getCurrentInstance } from "vue" import { onReachBottom, } from '@dcloudio/uni-app'; import { fetch_{{_object}}_list } from "@/service";
const {{_object}}_list = ref([]) const {{_object}}_param = ref({ size: 20, page: 1, keyword: "", }); const {{_object}}_isend = ref(false); const {{_object}}_isloading = ref(false); const get_{{_object}}_list = async (reload = false) => { {{_object}}_isloading.value = true if (reload) { {{_object}}_param.value.page = 1; {{_object}}_list.value = []; {{_object}}_isend.value = false; } const res = await fetch_{{_object}}_list({{_object}}_param.value) {{_object}}_isloading.value = false const list = res.data if (list.length > 0) { {{_object}}_list.value = [...{{_object}}_list.value, ...list]; } else if ({{_object}}_param.value.page === 1) {} else { {{_object}}_isend.value = true; } }
onMounted(() => { get_{{_object}}_list(true) }) onReachBottom(() => { if (!{{_object}}_isloading.value && !{{_object}}_isend.value) { {{_object}}_param.value.page++ get_{{_object}}_list() } })
<view class="{{_object}}_list"> <view class="{{_object}}_item" v-for="(item, index) in {{_object}}_list" :key="index">{{ item.{{_object}}_name }}</view> </view> <view v-if="{{_object}}_isloading" class="u-flex flex-center"> <up-loading-icon text="正在加载" mode="circle" size="16" textSize="14"></up-loading-icon> </view> <template v-if="!{{_object}}_isloading && {{_object}}_list.length === 0"> <up-empty :icon="`${__API__}/wximage/empty.png`" text="暂无数据"></up-empty> </template> <template v-if="{{_object}}_isend"> <up-divider text="我是有底线的" :dashed="true"></up-divider> </template>
222222