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

最新推荐文章于 2022-05-04 13:59:50 发布

weixin_34007291

最新推荐文章于 2022-05-04 13:59:50 发布

阅读量486

点赞数

文章标签：数据库前端 json ViewUI

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