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

数据列表在很多时候，经常会用到，这里介绍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>

来源地址：https://www.yujianni.top/news/comp_artinfo.html?id=878