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

...

相关推荐
顺丰同城前端技术团队7 分钟前
DeepSeek 国产大模型新标杆
前端·后端·程序员
花落已飘8 分钟前
多线程 vs 异步
linux·网络·系统架构
Java水解8 分钟前
微前端架构:从单体到模块化的前端新革命
前端
Mr_汪11 分钟前
uniapp使用h5的map(已弃用)
前端
前端进阶者14 分钟前
vite调试node_modules下面插件
前端·vite
YaHuiLiang22 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户261245834016124 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
CAD老兵30 分钟前
前端 Source Map 原理与结构详解
前端
运器12333 分钟前
【一起来学AI大模型】算法核心:数组/哈希表/树/排序/动态规划(LeetCode精练)
开发语言·人工智能·python·算法·ai·散列表·ai编程
gnip34 分钟前
markdown预览自定义扩展实现
前端·javascript