【UNI-APP】分頁請求數據列表

// 首先在對應的pages.json文件中，配置刷新效果
{
            "path" : "pages/list/list",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "房源列表",
                "enablePullDownRefresh": true
            }
            
        }

// 在methods里面定義請求數據接口

// 請求第1頁的數據
getList() {
                this.listData = []
                uni.request({
                    url: 'http://localhost:8000/api/house/list?page=1&size=7',
                    method: "POST",
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        style: 1,
                    },
                    success: (ret) => {

                        uni.stopPullDownRefresh(); // 停止當前頁面刷新
                        if (ret.data.code == 200) {

                            ret.data.data.some((item, i) => {
                                this.listData.unshift({

                                    title: item.title,
                                    price: item.price,
                                    id: item.id,
                                    image: "http://localhost:8000" + item.image,
                                    time: item.time,

                                })
                            })
                            // this.banner = data.data;
                        }
                    },
                    fail: (data, code) => {
                        console.log('fail' + JSON.stringify(data));
                    }
                })
            },





// 請求第N頁的數據
/* 分頁請求 */
            getPageList() {

                uni.request({
                    url: 'http://localhost:8000/api/house/list?page=' + this.page + '&size=7',
                    method: "POST",
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        style: 1,
                    },
                    success: (ret) => {
                        console.log(ret)
                        uni.stopPullDownRefresh(); // 停止當前頁面刷新
                        if (ret.data.code == 200) {

                            this.page = this.page + 1  // 頁面+1 

                            ret.data.data.some((item, i) => {
                                this.listData.push({

                                    title: item.title,
                                    price: item.price,
                                    id: item.id,
                                    image: "http://localhost:8000" + item.image,
                                    time: item.time,

                                })
                            })

                        } else {
                            /* 如果接口報錯 就是沒數據  加載消失   */

　　　　　　　　　　　　　　　　　　//　　<!-- 下拉加載 --> 加載HTML
　　　　　　　　　　　　　　　　　　//　　<view style="text-align: center;width: 100%;">
　　　　　　　　　　　　　　　　　　//　　　<u-loading mode="circle" :show="show" size="36">加載中...</u-loading>
　　　　　　　　　　　　　　　　　　//　　</view>

                            this.show = false
                        }
                    },
                    fail: (data, code) => {

                    }
                })
            },

// 下面是下拉上啦的配置函數
onLoad() {
            /* 列表 */
            this.getList();
        },

        onPullDownRefresh() {
            /* 下拉的時候更新 */
            this.getList();
        },

        onReachBottom() {
            // console.log("向下拉")
            //此處使用定時器可查看出下拉刷新效果
            setTimeout(() => {
                this.getPageList(() => {
                    uni.stopPullDownRefresh()
                })
            }, 1000)
        },

// 完整代碼

<template>
    <view>
        <!-- 輸入框 搜索 -->
        <view>
            <topSearch></topSearch>
        </view>

        <!-- 下拉菜單 -->
        <u-dropdown>
            <u-dropdown-item v-model="housePrice" title="價格高低" :options="optionsPrice" @change="changePrice"></u-dropdown-item>
            <u-dropdown-item v-model="houseTime" title="發布時間" :options="optionsTime" @change="changeTime"></u-dropdown-item>
        </u-dropdown>

        <!-- 商品列表 -->
        <view class="uni-list">

            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in listData" :key="key" @click="detail(value.id)"
             :pk="value.id">

                <view class="uni-media-list">
                    <image class="uni-media-list-logo" :src="value.image"></image>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">{{value.title}}</view>
                        <text>123</text>
                        <view class="uni-media-list-text-bottom">
                            <text>{{value.price}}</text>
                            <text>{{value.time}}</text>
                        </view>
                    </view>
                </view>
            </view>

        </view>

        <!-- 下拉加載 -->
        <view style="text-align: center;width: 100%;">
            <u-loading mode="circle" :show="show" size="36"></u-loading>
        </view>
    </view>
</template>

<script>
    import topSearch from "@/components/topSearch/topSearch.vue"
    var dateUtils = require('../../utils/util.js').dateUtils;

    export default {
        components: {
            topSearch
        },

        data() {
            return {
            
                
                /* 商品列表 */
                listData: [],
                last_id: "",
                reload: false,
                page: 1,
                show: true,
                
                /* 下拉菜單 */
                sort:1,
                houseprice: 1,
                houseTime: null,
                optionsPrice: [{
                        label: '默認排序',
                        value: 1,
                    },
                    {
                        label: '從低到高',
                        value: 2,
                    },
                    {
                        label: '從高到低',
                        value: 3,
                    }
                ],
                optionsTime: [{
                        label: '最近發布',
                        value: 4,
                    },
                    {
                        label: '最早發布',
                        value: 5,
                    },
                ],
            }
        },

        methods: {

            /* 跳轉詳情 */
            detail(goods_id) {
                
                /* 記錄商品主鍵 */
                // uni.setStorageSync('goods_id',)
                console.log(goods_id)
                // uni.navigateTo({
                //     url: '/pages/detail/detail'
                // })
            },

            /* 下拉菜單 */
            changePrice() {
                
                this.sort = this.housePrice
                this.getList()
            },
            changeTime() {
                this.sort = this.houseTime
                this.getList()
            }, 



            /* 剛進入請求接口 */
            getList() {
                /* 初始化參數 */
                this.page = 1
                this.listData = []
                
                uni.request({
                    url: 'http://localhost:8000/api/house/list?page=1&size=7',
                    method: "POST",
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        style: uni.getStorageSync('style'),
                        sort:this.sort
                    },
                    success: (ret) => {
                        
                        uni.stopPullDownRefresh(); // 停止當前頁面刷新
                        if (ret.data.code == 200) {
                            this.page = this.page + 1
                            ret.data.data.some((item, i) => {
                                this.listData.unshift({
                                        
                                    title: item.title,
                                    price: item.price,
                                    id: item.id,
                                    image: "http://localhost:8000" + item.image,
                                    time: item.time,

                                })
                            })
                            this.show = false
                        }
                    },
                    fail: (data, code) => {
                        console.log('fail' + JSON.stringify(data));
                    }
                })
            },


            /* 分頁請求 */
            getPageList() {
                this.show = true
                uni.request({
                    url: 'http://localhost:8000/api/house/list?page=' + this.page + '&size=7',
                    method: "POST",
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        style: uni.getStorageSync('style'),
                        sort:this.sort
                    },
                    success: (ret) => {
                        // console.log(ret)
                        uni.stopPullDownRefresh(); // 停止當前頁面刷新
                        if (ret.data.code == 200) {

                            this.page = this.page + 1

                            ret.data.data.some((item, i) => {
                                this.listData.push({

                                    title: item.title,
                                    price: item.price,
                                    id: item.id,
                                    image: "http://localhost:8000" + item.image,
                                    time: item.time,

                                })
                            })

                        } else {
                            /* 如果接口報錯 就是沒數據  加載消失 */
                            this.show = false
                        }
                    },
                    fail: (data, code) => {
                        this.show = false
                    }
                })
            },



        },

        onLoad() {
            /* 列表 */
            this.getList();
        },

        onPullDownRefresh() {
            /* 下拉的時候更新 */
            this.getList();
        },

        onReachBottom() {
            console.log("向下拉")
            //此處使用定時器可查看出下拉刷新效果
            setTimeout(() => {
                this.getPageList(() => {
                    uni.stopPullDownRefresh()
                })
            }, 1000)
        },



    }
</script>

<style>
    /* 列表 */
    .banner {
        height: 360upx;
        overflow: hidden;
        position: relative;
        background-color: #ccc;
    }

    .banner-img {
        width: 100%;
    }

    .banner-title {
        max-height: 84upx;
        overflow: hidden;
        position: absolute;
        left: 30upx;
        bottom: 30upx;
        width: 90%;
        font-size: 32upx;
        font-weight: 400;
        line-height: 42upx;
        color: white;
        z-index: 11;
    }

    .uni-list {
        background-color: #FFFFFF;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .uni-list:after {
        position: absolute;
        z-index: 10;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .uni-list::before {
        position: absolute;
        z-index: 10;
        right: 0;
        top: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .uni-list-cell {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .uni-list-cell-hover {
        background-color: #eee;
    }

    .uni-list-cell::after {
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: 0;
        left: 30upx;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .uni-list .uni-list-cell:last-child::after {
        height: 0upx;
    }

    /* 圖文列表 */
    .uni-media-list {
        padding: 22upx 30upx;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        flex-direction: row;
    }

    .uni-navigate-right.uni-media-list {
        padding-right: 74upx;
    }

    .uni-pull-right {
        flex-direction: row-reverse;
    }

    .uni-pull-right>.uni-media-list-logo {
        margin-right: 0upx;
        margin-left: 20upx;
    }

    .uni-media-list-logo image {
        height: 100%;
        width: 100%;
    }


    .uni-media-list-text-bottom {
        width: 100%;
        line-height: 30upx;
        font-size: 26upx;
        color: #8f8f94;
    }

    .uni-media-list-logo {
        width: 180upx;
        height: 140upx;
        margin-right: 20upx;
    }

    .uni-media-list-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        overflow: hidden;
        height: auto;
    }

    .uni-media-list-text-top {
        width: 100%;
        line-height: 36upx;
        font-size: 30upx;
        height: 74upx;
        font-size: 28upx;
        overflow: hidden;
    }

    .uni-media-list-text-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    /* 列表 */
</style>