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 黑
image.png
...