小程序首页获取数据给数组赋值,实现加载更多,以及遇到的坑

<!-- wxml-->

<view>
  <view class="refreshTip" wx:if="{{refreshCompeleted==true}}">刷新成功</view>
  <news-list-item wx:for="{{newsList}}" news="{{item}}" wx:key="item.id"></news-list-item>
  <view class="weui-loadmore" wx:if="{{loading===true}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">加载中</view>
  </view>
  <view class="weui-loadmore" wx:if="{{loadingCompeleted===true}}">
    <view class="weui-loadmore__tips">加载完成</view>
  </view>
  <view class="weui-loadmore weui-loadmore_line" wx:if="{{noData===true}}">
    <view class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无数据</view>
  </view>
</view>

不能直接把后台返回的数组数据赋值到定义的空数组中,一定要concat连接,否则结果是看似是个数组,但是获取到的该数组却为空,导致第一次上拉加载更多的时候是拿到的之前的数组依然是空数组。

var config = require('../../config')

var util = require('../../utils/util.js')



Component({

  properties: {

    category: {

      type: String,

      value: "index"

    },

    params: {

      type: String,

      value: ""

    },

  },

  data: {

    newsList: [],

    page: 0,

    size: 10,

    totalPages: 0,

    refreshCompeleted: false,

    loadingCompeleted: false,

    loading: false,

    noData: false

  },

  methods: {

    getList() {

      let that = this;

      that.setData({

        page: 0

      })

      if (that.data.category === "index") {

        util.get(`${config.service.host}/web/news/list_with_pub_info?channelId=${config.channelId}&page=0&size=${that.data.size}`, function(res) {

          res.data.content.filter((value) => {

            return value.createAt = util.formatTimeDistance(new Date(value.createAt))

          })

          let newsList = that.data.newsList.concat(res.data.content);//这里要特别注意,不能直接that.setData({newsList:res.data.content}) ,见下面注释

          that.setData({

            newsList: newsList,

            totalPages: res.data.totalPages,

          })

          if (res.data.content.length = 0) {

            that.setData({

              noData: true

            })

          }

          if (res.data.content.length !== 0 && that.data.page + 1 == that.data.totalPages) {

            that.setData({

              loadingCompeleted: true,

              loading: false,

              noData: false

            })

          }

          setTimeout(function() {

            that.setData({

              refreshCompeleted: true

            })

          }, 1000)

          setTimeout(function() {

            that.setData({

              refreshCompeleted: false

            })

          }, 2000)

        }, function(e) {

          console.log(JSON.stringify(e));

        });

      } else if (that.data.category === "search") {

        util.get(`${config.service.host}/web/news/search_in_channel_with_pub_info?channelId=${config.channelId}&page=${that.data.page}&size=${that.data.size}&q=${that.data.params}`, function(res) {

          res.data.content.filter((value) => {

            value.createAt = util.formatTimeDistance(new Date(value.createAt));

            let keyword = that.data.params;

            let re = new RegExp(keyword, "g");

            value.title = value.title.replace(re, `<span class="keyword">${keyword}</span>`);

            return value

          })

          let newsList = that.data.newsList.concat(res.data.content);

          that.setData({

            newsList: newsList,

            totalPages: res.data.totalPages,

          })

          console.log(res.data.content.length)

          if (res.data.content.length === 0) {

            that.setData({

              noData: true

            })

          }

          if (res.data.content.length !== 0 && that.data.page + 1 == that.data.totalPages) {

            that.setData({

              loadingCompeleted: true,

              loading: false,

              noData: false

            })

          }

          setTimeout(function() {

            that.setData({

              refreshCompeleted: true

            })

          }, 1000)

          setTimeout(function() {

            that.setData({

              refreshCompeleted: false

            })

          }, 2000)

        }, function(e) {

          console.log(JSON.stringify(e));

        });

      } else if (that.data.category === "professor") {

        util.get(`${config.service.host}/web/news/list_by_follow_with_pub_info?pubId=${that.data.params}&page=${that.data.page}&size=${that.data.size}&q=${that.data.params}`, function(res) {

          res.data.content.filter((value) => {

            return value.createAt = util.formatTimeDistance(new Date(value.createAt))

          })

          let newsList = that.data.newsList.concat(res.data.content);

          that.setData({

            newsList: newsList,

            totalPages: res.data.totalPages,

          })

          if (res.data.content.length === 0) {

            that.setData({

              noData: true

            })

          }

          if (res.data.content.length !== 0 && that.data.page + 1 == that.data.totalPages) {

            that.setData({

              loadingCompeleted: true,

              loading: false,

              noData: false

            })

          }

          setTimeout(function() {

            that.setData({

              refreshCompeleted: true

            })

          }, 1000)

          setTimeout(function() {

            that.setData({

              refreshCompeleted: false

            })

          }, 2000)

        }, function(e) {

          console.log(JSON.stringify(e));

        });

      }





    },

    getMoreList: function() {

      let that = this;

      setTimeout(function() {

        if (that.data.page + 1 < that.data.totalPages) {

          that.setData({

            page: that.data.page + 1,

            loading: true

          })

          if (that.data.category === "index") {

            util.get(`${config.service.host}/web/news/list_with_pub_info?channelId=${config.channelId}&page=${that.data.page}&size=${that.data.size}`, function(res) {

              res.data.content.filter((value) => {

                return value.createAt = util.formatTimeDistance(new Date(value.createAt))

              })

              that.setData({

                newsList: that.data.newsList.concat(res.data.content),

                totalPages: res.data.totalPages,

                loading: false

              })

            }, function(e) {

              console.log(JSON.stringify(e));

            });

          } else if (that.data.category === "search") {

            util.get(`${config.service.host}/web/news/search_in_channel_with_pub_info?channelId=${config.channelId}&page=${that.data.page}&size=${that.data.size}&q=${that.data.params}`, function(res) {

              res.data.content.filter((value) => {

                value.createAt = util.formatTimeDistance(new Date(value.createAt));

                let keyword = that.data.params;

                let re = new RegExp(keyword, "g");

                value.title = value.title.replace(re, `<text class="keyword">${keyword}</text>`);

                return value

              })

              that.setData({

                newsList: that.data.newsList.concat(res.data.content),

                totalPages: res.data.totalPages,

                loading: false

              })

            }, function(e) {

              console.log(JSON.stringify(e));

            });

          } else if (that.data.category === "professor") {

            util.get(`${config.service.host}/web/news/list_by_follow_with_pub_info?pubId=${that.data.params}&page=${that.data.page}&size=${that.data.size}&q=${that.data.params}`, function(res) {

              res.data.content.filter((value) => {

                return value.createAt = util.formatTimeDistance(new Date(value.createAt))

              })

              that.setData({

                newsList: that.data.newsList.concat(res.data.content),

                totalPages: res.data.totalPages,

                loading: false

              })

            }, function(e) {

              console.log(JSON.stringify(e));

            });

          }





        } else {

          that.setData({

            loading: false,

            loadingCompeleted: true

          })

        }

      }, 500)

    },

  },

})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

定时器

var timer=setInterval(函数,毫秒); 重复执行 clearInterval(timer); 清空定时器

1433
来自专栏Windows Community

Windows Phone 8.1 新特性 - 控件之列表选择控件

本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件。 在Windows Phone 8 时代,大家都会使用 LongListSelecto...

3449
来自专栏happyJared

IDEA快捷键拆解系列(六):Code篇

  以下是关于Code导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

1382
来自专栏Python

Python终端输出打印彩色字体的方法

一  实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关。    转义序列是以ESC开头,即用\033来完成(ESC的A...

2305
来自专栏Android中高级开发

深入分析Android动画(一)

  View动画顾名思义其作用对象为View,包含平移、缩放、旋转、透明,这四类变化分别对应着Animation的子类TranlateAnimation、Sca...

1154
来自专栏web

慕课网javascript 进阶篇 第九章 编程练习

1304
来自专栏清风

JavaScript IE9以下浏览器版本升级提示

942
来自专栏一“技”之长

Java开发GUI之可编辑区域 原

    Java的awt包中提供了单行的文本编辑组件TextField与多行的文本编辑区TextArea,这两个组件都是继承自TextComponent类。

842
来自专栏柠檬先生

Reactjs 入门基础(二)

如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下:   <body>     <div id="example"></...

2007
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

虽然Word不好用, 但还必须得用它, python-docx是专门用于编辑Word文档的一个工具库, 它有两大用途, 自动化生成word文档 and 自动化...

2.2K7

扫码关注云+社区

领取腾讯云代金券