uni-app 之下拉刷新，上拉加载，获取网络列表数据

灰太狼 2023-10-15 21:22 5阅读 0赞

##  ##

uni-app 之 下拉刷新，上拉加载，获取网络列表数据

![format_png][]

image.png

<template>
        <view>
            
    
    
            --- uni.request 网络请求API接口 ---
            <view v-for="(item) in newsArr" :key="item.id" style="display: flex; margin-top: 12rpx;">
                
                <image :src="item.picurl" mode="aspectFill" style="width: 300rpx;height: 200rpx;margin-left: 12rpx;">
                </image>
    
                <view style="display: flex;flex-direction: column; flex-wrap: wrap;width: 400rpx; margin-left: 12rpx;">
                    <text style=" font-weight:bold;"> {
       {item.title}}</text>
                    <text style="font-size:12rpx;">{
       {item.posttime}}</text>
                    <text style="color:#d81e06">{
       {item.hits}}</text>
                </view>
    
            </view>
    
            <view v-if="!newsArr.length">
                没有数据的时候展示图片
                <image src="../../static/logo.png"></image>
            </view>
    
    
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
    
                    newsArr: [],
                    currentPage: 1,
    
                }
            },
            onLoad() {
    
                this.getNewsData()
    
            },
            onPullDownRefresh() {
                console.log("111 111 下拉 " + this.currentPage)
                this.newsArr = [] // 下拉刷新时，清空集合
                this.currentPage = 1 // 下拉刷新时，page恢复初始1
                this.getNewsData() // 下拉刷新时，重新获取数据
            },
            onReachBottom() {
                console.log("111 111 到底啦 " + this.currentPage)
                uni.stopPullDownRefresh()
                this.currentPage++; // 上拉加载时，page+1
                this.getNewsData(50); // 传输的cid是在有头部tabbar点击切换的时候才用到，正常的列表可以删除
            },
            methods: {
                getNewsData(id = 50) {
                    uni.request({
                        url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
                        data: {
                            // num:8,//展示几条，默认8条
                            // cid:50,//列表分类：50国内，51国外，52体育，53软件，
                            cid: id, // 传输的cid是在有头部tabbar点击切换的时候才用到，正常的列表可以删除
                            page: this.currentPage
                        },
                        // timeout:"6000",
                        success: res => {
                            console.log(res) // log打印获取的数据
                            // this.newsArr = res.data
                            this.newsArr = [...this.newsArr, ...res.data]
    
                            uni.stopPullDownRefresh() // 加载出数据后关闭下拉动画
                        },
    
                    })
                }
    
            }
    
    
        }
    </script>
    
    <style>
    
    </style>

// d81e06 紅
    // f4ea2a 黃
    // 1afa29 綠
    // 1296db 藍
    // 13227a 青
    // d4237a 紫
    
    // ffffff 白
    // 2c2c2c 黑

#### 注意:pages.json里的enablePullDownRefresh要改为true ####

![format_png 1][]

image.png

...

[format_png]: https://img-blog.csdnimg.cn/img_convert/aacb4609eb1cc3ffd4040532c4dc72ed.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/9893c209fc3e946a8843a6afa097fae9.webp?x-oss-process=image/format,png