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

...

相关推荐
超级土豆粉10 分钟前
JavaScript 标签加载
开发语言·javascript·ecmascript
love530love12 分钟前
教程:PyCharm 中搭建多级隔离的 Poetry 环境(从 Anaconda 到项目专属.venv)
开发语言·ide·人工智能·windows·python·pycharm
用户214118326360213 分钟前
dify案例分享-Dify+RSS 聚合 8 大平台实时热点,新闻获取效率飙升 300%
前端
百锦再15 分钟前
Razor编程中@Html的方法使用大全
前端·html
啪叽18 分钟前
JavaScript可选链操作符(?.)的实用指南
前端·javascript
Ian在掘金18 分钟前
bat+python实现easy connect自动连接
前端·python
代码搬运媛21 分钟前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
小桥风满袖23 分钟前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
Luckyfif26 分钟前
🤯由 性能指标 散发开来的 Performance API 被问爆了呀
前端·面试·性能优化
咸虾米29 分钟前
在uniCloud云对象内使用unipay的微信退款出现错误“uniPayCo.refund Error: token校验未通过”的解决方案
前端·后端