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

 

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

},

},

})