小程式首頁獲取數據給數組賦值，實現載入更多，以及遇到的坑

来源:https://www.cnblogs.com/beileixinqing/archive/2018/08/13/9468099.html
-Advertisement-
Play Games

不能直接把後臺返回的數組數據賦值到定義的空數組中，一定要concat連接，否則結果是看似是個數組，但是獲取到的該數組卻為空，導致第一次上拉載入更多的時候是拿到的之前的數組依然是空數組。 var config = require('../../config') var util = require(' ...


  
<!-- 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) }, }, })
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery獲取Select option 選擇的Text和 Value
    獲取一組radio被選中項的值:var item = $('input[name=items][checked]').val();獲取select被選中項的文本var item = $("select[@name=items] option[@selected]").text(); 獲取select ...
  • ES6的小知識（前半部分）
    一、let與const的使用 let：用來聲明一個變數，與var類似 1.用let聲明的變數，所聲明的變數只在命令所在的代碼塊內有效 2.用let聲明的變數在域解析的時候是不會被提升的 3.let不允許在同一作用域下聲明已經存在的變數 4.let和var在for迴圈里的區別 另外在for迴圈語句里的 ...
  • 非同步載入的方式
    一、同步載入與非同步載入的形式 1. 同步載入 我們平時最常使用的就是這種同步載入形式：<script src="http://yourdomain.com/script.js"></script> 同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，停止了後續的解析，因此停止了後續的文件載入（如圖像）、 ...
  • js中改變this指向的call、apply、bind 方法使用
    前言： 由於js 中this的指向受函數運行環境的影響，指向經常改變，使得開發變得困難和模糊，所以在封裝sdk，寫一些複雜函數的時候經常會用到this 指向綁定，以避免出現不必要的問題，call、apply、bind基本都能實現這一功能，現對這三種方法使用總結一下： 1、function.proto ...
  • KeyPress 和KeyDown 、KeUp之間的區別
    keyup適用於文本框的數據輸入和同步，以及數據的獲取；keydown 與 keypress更適用於通過鍵盤控制頁面功能的實現(如回車事件) ...
  • js-base64轉二進位
    function base64ToBlob(base64) { var arr = base64.split(','); var mime = arr[0].match(/:(.*?);/)[1] || 'image/png'; // 去掉url的頭，並轉化為byte var bytes = win... ...
  • js實現把一個頁面層數據傳遞到另一個頁面
    由於之前面試，被問到過此問題，所以今天特意整理了一下。由於自己技術水平有限，若存在錯誤，歡迎提出批評。 本博客整理了兩種方式從一個頁面層向另一個頁面層傳遞參數。 一. 通過cookie方式 1. 傳遞cookie頁面的html,此處命名為a.html 2.a.html的js代碼 3. 接受cooki ...
  • git clone命令
    從遠程clone一個倉庫 。。。知識淺薄 git clone都發現貌似用的不順 因為我有幾個git賬號 但是我也不知道就是git賬號是怎麼保存在終端上的 所以當我需要用一個新的github賬號來clone遠程倉庫的時候 我需要新換一個用戶名跟密碼 但是問題來了。。。 我不知道怎麼在 git clon ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類