2. 定义变量data() { return { dataList: [], last_id: '', reload: true, //判断是否为第一轮加载,以便赋予index值 time: 1, //该_uniapp onshow 加载赋值">
当前位置:   article > 正文

uniapp 上拉刷新加载更多数据_uniapp onshow 加载赋值

uniapp onshow 加载赋值

1. 用到uniapp的组件

<uni-load-more :status="status" :content-text="contentText"></uni-load-more>

2. 定义变量

  1. data() {
  2. return {
  3. dataList: [],
  4. last_id: '',
  5. reload: true, //判断是否为第一轮加载,以便赋予index值
  6. time: 1, //该值是为了动态更新向服务器传递的参数值
  7. index: 0, //为获取的数据进行分段处理,十条数据一加载
  8. loadingFlag: true, //判断是否继续上拉加载数据
  9. status: 'more', //加载状态
  10. contentText: {
  11. contentdown: '点击记载更多',
  12. contentrefresh: '正在加载...',
  13. contentnomore: '没有更多数据了'
  14. }
  15. };
  16. },

3.  增加事件

  1. onShow() {
  2. this.getDynamicList();
  3. },
  4. // 触底加载更多
  5. onReachBottom() {
  6. if (this.loadingFlag == true) {
  7. this.status = 'more';
  8. this.getDynamicList();
  9. }
  10. },

4. 调用接口获取数据,每次获取五条数据,没下拉加载一次获取五条数据

  1. getDynamicList() {
  2. let that = this;
  3. let params = {
  4. offset: 0,
  5. pageSize: 5
  6. };
  7. if (that.last_id) {
  8. that.status = 'loading';
  9. params.offset = that.time * 5;
  10. that.time++;
  11. }
  12. console.log('params:', params);
  13. newsList(params).then(res => {
  14. if (res.statusCode == 200) {
  15. let data = res.data.rows;
  16. let list = [];
  17. let num = params.pageSize - data.length;
  18. if (that.reload && data.length == 0) {
  19. return false;
  20. } else {
  21. if (!that.reload) {
  22. that.index += 5;
  23. }
  24. if (num !== 0) {
  25. that.status = 'noMore';
  26. that.loadingFlag = false;
  27. }
  28. for (let j = 0; j < data.length; j++) {
  29. list.push(data[j]);
  30. }
  31. that.last_id = list[list.length - 1].id;
  32. that.dataList = that.reload ? list : that.dataList.concat(list);
  33. that.reload = false;
  34. }
  35. }
  36. });
  37. },

亲测有效

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/221380
推荐阅读
相关标签
  

闽ICP备14008679号