微信小程序分页查询如何设置下一页

Question

微信小程序，分页查询，每次查询10条数据，如何下拉到底部，请求下一次的10条数据

<template>
    <!-- 搜索框 -->
    <view class="tab-strickt">
        <u-search v-model="keywords" @change="searchBtn" bg-color="#FFF" margin="8px" style="flex-grow: 1;"
            :show-action="true" action-text="搜索" :animation="true" @custom="searchBank"></u-search>
    </view>
    <!-- 搜索框结束 -->
    <!-- 内容开始 -->
    <view v-for="(item, index) in flowList" :key="index" ref="uWaterfall1">
        <view class="wai">
            <view class="title">{{item.name}}</view>
            <view class="title">{{item.gongsiname}}</view>
            <view class="title">{{item.address}}</view>
            <view class="title">{{item.detail}}</view>
            <view class="title">{{item.low}}</view>
            <view class="title">{{item.tall}}</view>
        </view><u-line class="u-line" border-style="dashed" color="#24a8e4"></u-line>
    </view>
    <!-- 内容结束 -->
</template>
<script setup>
    import {
        getZhiweiListApi
    } from '../../api/index.js'
    import {
        ref
    } from 'vue';
    import {
        onLoad
    } from '@dcloudio/uni-app';
    const keywords = ref('')
    const uWaterfall1 = ref()
    //列表数据
    const page = ref(1);
    const size = ref(10);
    const flowList = ref([])
    const getList = async () => {
        console.log(keywords.value)
        let res = await getZhiweiListApi(keywords.value, page.value, size.value)
        if (res && res.code == 200) {
            let list = res.data.records;
            flowList.value = list;
        }
        console.log(flowList.value)
    }
    //关键字搜索
    const searchBtn = (e) => {}
    const searchBank = () => {
        console.log("搜索事件")
        uWaterfall1.value = []
        //获取数据
        getList()
    }
    onLoad(() => {
        getList()
    })
</script>

<style>
    .wai {
        height: 120px;
        border: 1px white solid;
        margin-left: 5px;
        margin-right: 5px;
    }
    /* 搜索框 */
    .icons {
        margin-right: 20px;
    }

    .searchk {
        border: 1px #f0f0f0 solid;
        width: 60%;
        display: flex;
        margin-top: 5px;
        margin-left: 20%;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
    }

    .iconsearch {
        width: 60%;
    }

    /* 搜索框结束 */
</style>

Answer 1

该回答引用ChatGPT4o及杨同学*共同作答, 如有帮助，还请采纳。
为了实现微信小程序的分页查询和下拉加载下一页数据，你可以通过以下步骤进行修改：

1. 在滚动到底部时触发下一页数据加载

你需要在 `onReachBottom` 生命周期中进行下一页数据的请求。每次请求数据时将 `page` 加1，并且将返回的新数据追加到现有列表中。


<template>
    <!-- 搜索框 -->
    <view class="tab-strickt">
        <u-search v-model="keywords" @change="searchBtn" bg-color="#FFF" margin="8px" style="flex-grow: 1;"
            :show-action="true" action-text="搜索" :animation="true" @custom="searchBank"></u-search>
    </view>
    <!-- 搜索框结束 -->
    <!-- 内容开始 -->
    <view v-for="(item, index) in flowList" :key="index" ref="uWaterfall1">
        <view class="wai">
            <view class="title">{{item.name}}</view>
            <view class="title">{{item.gongsiname}}</view>
            <view class="title">{{item.address}}</view>
            <view class="title">{{item.detail}}</view>
            <view class="title">{{item.low}}</view>
            <view class="title">{{item.tall}}</view>
        </view>
        <u-line class="u-line" border-style="dashed" color="#24a8e4"></u-line>
    </view>
    <!-- 内容结束 -->
</template>

<script setup>
import {
    getZhiweiListApi
} from '../../api/index.js'
import {
    ref
} from 'vue';
import {
    onLoad,
    onReachBottom
} from '@dcloudio/uni-app';

const keywords = ref('')
const page = ref(1);
const size = ref(10);
const flowList = ref([]);
const isNoMore = ref(false); // 判断是否还有更多数据

// 获取数据列表
const getList = async () => {
    if (isNoMore.value) return; // 如果没有更多数据，不再请求
    let res = await getZhiweiListApi(keywords.value, page.value, size.value);
    if (res && res.code == 200) {
        let list = res.data.records;
        if (list.length < size.value) {
            isNoMore.value = true; // 如果返回的数据小于每页的数量，表示没有更多数据了
        }
        flowList.value = [...flowList.value, ...list]; // 追加数据到列表
        page.value++; // 页码加1
    }
}

// 搜索关键字
const searchBank = () => {
    flowList.value = [] // 清空原有数据
    page.value = 1; // 重置页码
    isNoMore.value = false; // 重置是否有更多数据标识
    getList();
}

onLoad(() => {
    getList();
});

// 监听下拉到底部
onReachBottom(() => {
    getList(); // 触发下一页加载
});
</script>

1. 说明

• onReachBottom: 当页面滚动到底部时触发，可以用于加载更多数据。
• page: 当前的页码，每次请求数据时增加 page 值。
• size: 每页的条目数，每次请求10条。
• isNoMore: 用于判断是否还有更多数据，如果返回的数据小于 size，表示已经到最后一页了。

1. 样式和数据绑定
   这里的样式保持不变。数据加载后，新的数据将会被追加到 flowList 中，并渲染在页面上。

这个实现适用于下拉加载分页数据，保证在用户滚动到底部时自动加载下一页的数据，同时也确保如果数据已经加载完毕，不会再继续发送请求。