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


     
    <!-- 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)
    },
    },
    })
  • 相关阅读:
    如何测试复杂的逻辑
    Docker 安装nginx和tomcat
    提高英语
    2020年终总结
    在互联网上班是什么感觉?
    已经过去2周了,你感觉怎么样?
    如何使用玩弄 macOS 的「聚焦搜索」
    如何使用玩弄 macOS 的「聚焦搜索」
    [sdoi2015]排序(搜索+剪枝优化)
    [sdoi 2010][bzoj 1925]地精部落(神仙dp)
  • 原文地址:https://www.cnblogs.com/beileixinqing/p/9468099.html
Copyright © 2020-2023  润新知