uniapp启动界面加载缓慢 ios uniapp上啦加载

转载

信息小飞侠 2023-10-26 23:36:19

文章标签 uniapp启动界面加载缓慢 ios 数据加载 Data 文章分类 iOS 移动开发

UNI-APP上拉分段加载数据，主要是做好数据的处理，使得环环相扣

背景：

测试APP时，发现列表数据上拉加载有毛病，要么显示不了所有数据，要么显示的数据有重复。经查看，是获取数据的API有分页参数（page和size），但是只是分页，而不是分段。换句话说，查询第二页的数据会连同第一页的数据一起返回，为了锻炼自己，决定从有瑕疵的前端解决这个问题。

思路：

1、获取数据的分段处理

(1)无数据

不显示加载状态栏
显示无数据信息提示

(2)有数据

uniapp启动界面加载缓慢 ios uniapp上啦加载_uniapp启动界面加载缓慢 ios

动态设置API参数取值

加载数据时动态改变API参数值，这里设置time来控制，追加数据时time++，确保查询的追加数据条数比上次获取的数据多十条。

分段截取数据

以index为索引连续抽取十条数据放进定义的数组listArr（相当于中转器）中，根据reload值判断数据是第一次加载还是再次加载（这里统一说成追加数据）

组合分段数据显示

将截取的追加数据和第一次加载的数据连接起来赋给最终list，通过template中的v-for循环显示在客户端

2、加载状态切换处理

(1)渲染初加载完页面设置为‘上拉加载更多’

(2)上拉到底设置为‘加载中’，这里通过判断是否为追加数据进行设置

(3)数据加载完毕设置为‘没有更多’

根据传递的条数值size和实际得到数据长度之差来判断数据是否加载完毕，如果不为0则表示加载完毕，此时设置loadingFlag控制上拉到底时不再触发数据加载

代码：

<template>
      <view class="">
            <view class="tishiXinxi" v-if="anzhuangXinxi">
                  没有现场安装申请信息
            </view>
            <view class="apply_list_box" v-for='(item,index) in list' :key="index">
                  <view class="apply_list">
                        <image class="photo_head" src="/static/qingjia_bg.png" mode=""></image>
                        <view class="apply_list_text">
                              <view class="text_1">{{item.processDefinitionName}}</view>
                              <button type="primary" @tap="riZhi" :data-id='item.id'>流程日志</button>
                              <view class="text_2">{{item.startTime}}</view>
                        </view>
                  </view>
                  <view class="xiaoxi_line"></view> 
            </view>
            <uni-load-more :status="status" :content-text="contentText" /><!-- 加载列表 -->
      </view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
var app = getApp();
export default {
      data() {
            return {
                  proInstId: '',
                  templateId:'',
                  last_id: '',
                  list:[],
                  anzhuangXinxi:false,
                  reload:true,//判断是否为第一轮加载，以便赋予index值
                  time:2,//该值是为了动态更新向服务器传递的参数值
                  index:0,//为获取的数据进行分段处理，十条数据一加载
                  loadingFlag:true,//判断是否继续上拉加载数据
                  status: 'more',//加载状态
                  contentText: {
                        contentdown: '上拉加载更多',
                        contentrefresh: '加载中',
                        contentnomore: '没有更多'
                  }
            };
      },
      onLoad(option) {
            this.templateId = option.templateId;
      },
      onShow(){
            this.getList();
      },
      onReachBottom() {
            if(this.loadingFlag==true){
                  this.status = 'more';
                  this.getList();
            }
      },
      methods: {
            getList: function(){
                  var that = this;
                  var Authorization = app.globalData.Authorization;
                  const data = {
                        '流程模板key':'process_setup',
                        page:1,
                        size:10
                  };
                  if (that.last_id) {
                        //说明已有数据，目前处于上拉加载
                        that.status = 'loading';
                        data.size = 10*that.time;
                        that.time++;
                  }
                  console.log("data:"+JSON.stringify(data));
                  this.$servers
                        .globalRequest('actApi/my', 'POST', data, Authorization)//此处封装了AJAX，只要能获取到接口数据，怎样都成
                        .then(res => {
                              let listData = res.data.data;
                              console.log("listData:"+listData.length);
                              var num = data.size-listData.length;
                              var listArr= [];
                              if(that.reload==true && listData.length==0){
                                    that.anzhuangXinxi = true;
                                    that.contentText = '';
                                    return false;
                              }else{
                                    if(that.reload==false){
                                          that.index +=10;
                                    }
                                    if(num!=0){
                                          that.status = 'noMore';
                                          that.loadingFlag = false;
                                    }
                                    for(var j=that.index;j<(that.index+10>=listData.length?listData.length:that.index+10);j++){
                                          listArr.push(listData[j]);
                                    }
                                    that.last_id = listArr[listArr.length-1].id;
                                    that.list = that.reload ? listArr : that.list.concat(listArr);
                                    that.list.sort(function(a, b) {
                                          return a.startTime < b.startTime ? 1 : -1;
                                    });
                                          this.reload = false;
                                    }
                              })
                        .catch(parmas => {});
                  }
            }
      };
</script>