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恢复初始1this.getNewsData() // 下拉刷新时，重新获取数据},onReachBottom() {console.log("111 111 到底啦 " + this.currentPage)uni.stopPullDownRefresh()this.currentPage++; // 上拉加载时，page+1this.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.datathis.newsArr = [...this.newsArr, ...res.data]uni.stopPullDownRefresh() // 加载出数据后关闭下拉动画},})}}}
</script><style></style>

// d81e06 紅
// f4ea2a 黃
// 1afa29 綠
// 1296db 藍
// 13227a 青
// d4237a 紫// ffffff 白
// 2c2c2c 黑

注意:pages.json里的enablePullDownRefresh要改为true

image.png

...