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

...

相关推荐
lens94几秒前
Oxlint v1.0.0 发布:ESLint 的性能革命,快 50~100 倍!
前端·javascript
这里是阿栗2 分钟前
TS进阶!深入探索 TypeScript 工具类型:内置神器与高阶扩展
前端·typescript
DarkLONGLOVE4 分钟前
一键锁死网页内容!这个JS函数让你的原创无法被复制!
前端·javascript
DarkLONGLOVE4 分钟前
彻底解决"'vue-cli-service' 不是内部或外部命令"的问题!
前端·vue.js
柳中仙16 分钟前
uniapp+vue3小程序分享
小程序·uni-app
curdcv_po17 分钟前
甲方嫌弃,项目首页加载太慢
前端
.似水18 分钟前
Python requests
开发语言·python
刘同学有点忙19 分钟前
技术升级中的"幽灵Bug"排查:从message失效看架构迁移的隐性成本
前端
不会飞的鲨鱼20 分钟前
FastMoss 国际电商Tiktok数据分析 JS 逆向 | MD5加密
javascript·python·数据挖掘·数据分析
怪大叔952720 分钟前
vue组件之远程组件
前端·javascript·vue.js