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
...