uniapp列表数据遍历方法,实现上拉加载,下拉刷新

2020-12-28   阅读:736   分类:前端    标签: uni-app

数据列表在很多时候,经常会用到,这里介绍uniapp数据遍历方法。

步骤一:首先开启上拉加载,下拉刷新

打开pages.json,添加如下代码,开启enablePullDownRefresh

{
"path": "pages/index/index",
style":{
"enablePullDownRefresh": true
         }
}

步骤二、代码实现

1、页面模板代码:遍历数据,没有数据是显示的提示内容

<template>
<!-- 列表 -->
<view>
         <view v-for="(item) in List"  @click="play(item.id)">
                   <view>
                            <image :src="item.vod_pic" mode="" lazy-load="true" fade-show="true"></image>
                            <view>{{item.aricle_continu}}</view>
                   </view>
                   <view>{{item.aricle_name}}</view>
                   <view>{{item.aricle_content}}</view>
         </view>
         <view v-if="flag">
                   <image src="/static/no.png" mode=""></image>
                   <view class="">没有数据了</view>
         </view>
</view>
<!-- 列表 -->
</template>

2、js逻辑代码:定义数组集合,页码,是否显示没有更多数据变量

<script>
         export default {
                   data() {
                            return {
                                     List: [],  //数据集合
                                     page: 1,   //页码
                                     flag: false  //是否显示没有更多数据了
                                    
                            }
                   },
                   onLoad() {
                            this.article()
                   },
                   // 下拉刷新
                   onPullDownRefresh() {
                                     var that = this
                                     that.page = 1
                           this.article()
                   },
                   onReachBottom() { //滚动到底翻页
                            var that = this
                            var pages =  that.page
                            that.page = ++pages
                            this.articleAdd()
                     console.log(that.page)
                   },
                   methods: {
                            // 列表
                            async article(){
                                     var that =this
                                     const res = await this.$myRequest({
                                               url: '/api/Uniapp/getarticle',
                                               data: {
                                                        page: that.page,
                                               }
                                     })
                                     this.vodList = res.data.data
                                     console.log( res.data)
                            },
                            // 追加列表
                            async articleAdd(){
                                     var that =this
                                     const res = await this.$myRequest({
                                               url: '/api/Uniapp/getarticle',
                                               data: {
                                                        page: that.page,
                                               }
                                     })
                                     this.vodList = [...this.vodList,...res.data.data]
                                     if(res.data.data.length ==0){
                                               that.flag = true
                                     }
                                     console.log( res.data)
                            },
                           
                            // 详情页
                            detail(id){
                                     uni.navigateTo({
                                               url: '../detail/detail?id='+id
                                     })
                            }
                   }
         }
</script>


【腾讯云】爆款1核2G云服务器首年48元,还有iPad Pro、Bose耳机、京东卡等你来抽!

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/563.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×