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

...

相关推荐
Q_Q19632884753 分钟前
python+uniapp基于微信美食点餐系统小程序
spring boot·python·微信·django·flask·uni-app·node.js
王道长服务器 | 亚马逊云3 分钟前
AWS CloudFormation —— 自动化部署的“云中脚本大师”
运维·服务器·网络·自动化·云计算·aws
KIKIiiiiiiii4 分钟前
微信个人号开发中如何高效实现API二次开发
java·前端·python·微信
胡八一10 分钟前
30 分钟上手 exp4j:在 Java 中安全、灵活地计算数学表达式
java·开发语言·安全
日月之行_10 分钟前
Vite+:企业级前端构建的新选择
前端
山顶听风21 分钟前
Flask应用改用Waitress运行
前端·笔记·python·flask
Tom Ma.23 分钟前
使用腾讯云云开发(CloudBase)的云函数,删除云存储中指定目录下的过期文件
前端·javascript·腾讯云
ZepngLin24 分钟前
时间敏感网络(TSN)
网络
Bruce_Liuxiaowei24 分钟前
解决Kali虚拟机中VMnet1(仅主机模式)网卡无法获取IP地址的问题
运维·网络·网络协议·tcp/ip
Hilaku37 分钟前
技术、业务、管理:一个30岁前端的十字路口
前端·javascript·面试