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

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

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

image.png

...

相关推荐
CodeWithMe7 分钟前
【C/C++】namespace + macro混用场景
c语言·开发语言·c++
不浪brown7 分钟前
开源!矢量建筑白模泛光特效以及全国77个大中城市的矢量shp数据获取!
前端·cesium
山有木兮木有枝_9 分钟前
JavaScript 数据类型与内存分配机制探究
前端
小小小小宇14 分钟前
前端 异步任务并发控制
前端
蓝婷儿15 分钟前
6个月Python学习计划 Day 17 - 继承、多态与魔术方法
开发语言·python·学习
fei_sun23 分钟前
【计算机网络】三报文握手建立TCP连接
网络·tcp/ip·计算机网络
bysking28 分钟前
【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking
前端·vue.js
LuckySusu29 分钟前
【HTML篇】script`标签中的 defer 与 async:深入解析异步加载 JavaScript 的差异
前端·html
CAD老兵30 分钟前
在 TypeScript 中复用已有 Interface 的部分属性:完整指南
前端
一头小鹿32 分钟前
【JS】原型和原型链 | 笔记整理
javascript