小程序首页获取数据给数组赋值，实现加载更多，…

2018-08-13 07:45:58来源：博客园阅读 ()

<!-- 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)
    },
  },
})