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

来源: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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類