zoukankan      html  css  js  c++  java
  • 小程序首页获取数据给数组赋值,实现加载更多,以及遇到的坑

     
    <!-- 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)
    },
    },
    })
  • 相关阅读:
    day25:接口类和抽象类
    vue1
    How the weather influences your mood?
    机器学习实验方法与原理
    How human activities damage the environment
    Slow food
    Brief Introduction to Esports
    Massive open online course (MOOC)
    Online learning in higher education
    Tensorflow Dataset API
  • 原文地址:https://www.cnblogs.com/beileixinqing/p/9468099.html
Copyright © 2011-2022 走看看