• 【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; 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; 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 {
             100%;
        }
    
        .banner-title {
            max-height: 84upx;
            overflow: hidden;
            position: absolute;
            left: 30upx;
            bottom: 30upx;
             90%;
            font-size: 32upx;
            font-weight: 400;
            line-height: 42upx;
            color: white;
            z-index: 11;
        }
    
        .uni-list {
            background-color: #FFFFFF;
            position: relative;
             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;
             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%;
             100%;
        }
    
    
        .uni-media-list-text-bottom {
             100%;
            line-height: 30upx;
            font-size: 26upx;
            color: #8f8f94;
        }
    
        .uni-media-list-logo {
             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 {
             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>
    主攻:Python 数据分析 web 机器学习 图像识别。。 副攻:JAVA WEB 安卓 大数据
  • 相关阅读:
    springboot 配置
    spring boot配置分页插件
    mongodb 操作
    java基础知识
    java设计模式
    /cat/cpuinfo信息查看
    app接口开发
    基于OpenAM系列的SSO----基础
    关于Linux下的连接文件学习总结
    YII :将oracle中timestamp 字段正常显示在页面中
  • 原文地址:https://www.cnblogs.com/wanghong1994/p/14298014.html
Copyright © 2020-2023  润新知