微信小程序實戰篇-下拉刷新與加載更多

2021-02-23 代碼集中營

哈嘍，大家好，看這標題是不是有點奇怪，你們期盼的微信小程序實戰篇-電商（三）沒出現，我是這麼想的，因為電商裡面的內容有很多，如何我只是以一二三那樣命名的話，不方便你們查看每篇文章講解的內容，所以我就換了一個命名的方式，把每篇要講解的主要內容做為標題，這樣就方便以後你們忘記知識點，要回顧的時候可以快速查找的到，有木有很貼心啊~，不要迷戀哥，哥只是個傳說。好了不開玩笑啦，回到正題上來，請看標題，木錯，我們今天就要講解一下下拉刷新與加載更多。

實現下拉刷新目前能想到的有兩種方式

調用系統的API，系統有提供下拉刷新的API接口


監聽scroll-view,自定義下拉刷新，還記得scroll-view裡面有一個bindscrolltoupper屬性嗎？忘記請自行回顧上一篇 微信小程序實戰篇-電商（二）當滾動到頂部/左邊，會觸發 scrolltoupper 事件，所以我們可以利用這個屬性，來實現下拉刷新功能。

兩種方法都可以，第一種比較簡單，易上手，畢竟一些邏輯系統已經給你處理好了，第二種適合那種想要自定義下拉刷新樣式的小程序，我們講解電商，就用第一種，系統提供的就好，主要是教會大家怎麼用。以首頁為例

home.json 參數配置


我們哪個頁面需要下拉刷新，就在哪個頁面對應的xxx.json文件配置上面屬性,這個屬性從字面意思也可以知道，是否允許下拉刷新，當然，如何你不想一個個配置允許下拉刷新，你可以直接在全局變量app.json的window裡面配置上面這個屬性，這樣整個項目都允許下拉刷新了,這個一定要加的，因為系統默認是不具備下拉刷新功能的

home.js



onPullDownRefresh 下拉刷新事件監聽，具體看一下裡面的代碼，wx.showNavigationBarLoading() 與wx.hideNavigationBarLoading() 這兩句話是用來控制小菊花的顯示和隱藏，由於我們現在還沒有講解網絡請求，所以我就模擬了一下網絡加載，通過setTimeout方法，寫一個時間延遲的方法，這個方法可以模擬網絡加載所消耗的時間，還有就是當網絡加載完成我們要停止下拉刷新wx.stopPullDownRefresh() 。

這個到目前為止下拉刷新的功能已經完成了，但是還不夠完美，還是有點怪怪的，就是下拉刷新沒有動畫，有木有~我那時也感到奇怪，微信封裝的下拉刷新怎麼可能這樣吶，後來我參考別人寫的代碼，發現一個小坑，先看一下我填完坑的效果吧


怎麼樣，是不是順眼多了，想知道我是怎麼加入這個動畫的嘛，讓我來給你揭曉，其實很簡單，只需要一句話代碼在app.json中window裡配置下面屬性，這個是配置整個系統的背景顏色，為什麼我配置系統顏色就會出現下拉刷新了吶，原因就在下拉刷新的動畫本身就有，只不過當我們沒配置背景顏色，系統默認就為白色，動畫也是白色，所以我們就看不到動畫效果，是不是有點坑，哈哈~~

實現加載更多也同理有兩種方式

調用系統的API

監聽scroll-view，bindscrolltolower滑動到底部的監聽

我還是拿第一種實現方式講解，處理方式和下拉刷新略有不同，不過也大同小異吧，還是以首頁為例

home.js

onReachBottom系統提供的觸底事件的監聽，和下拉刷新一樣，我們也是模擬一些數據，加了一個時間延遲的事件，isHideLoadMore，一個自定義的值，用來控制顯示和隱藏加載控制項

home.wxml

在home.wxml底部加入上面的代碼，這是加載更多的控制項，加載更多待遇就沒下拉刷新待遇好，系統並沒有提供加載更多的控制項動畫，所以我們需要自己製作

home.wxss


這個是我們自定義的樣式，樣式很簡單，就是一個簡單的加載小菊花，這裡我要講解的是 weui-loading 樣式裡設置 background，data:image/svg+xml;base64這個是什麼意思吶，我們之前一般設置背景直接加入顏色，這個是background的另一種用法，加入圖片，這個圖片還有點特別是base64格式，並用svg繪製的，當然你還可以直接把url裡面寫入圖片路徑也是可以的，好，下面我們一起看一下效果吧！


今天就講到這裡，下拉刷新和加載更多都是前端程序必備的知識，幾乎所有APP裡都有下拉刷新和加載更多，所以大家一定要掌握，這裡主要講解的是小程序自帶的下拉刷新與加載更多API，大家可以試著挑戰一下用第二種方式，實現一下~

關注公眾號獲取最新文章

相關焦點

  • 微信小程序實戰篇:實現抖音評論效果
    我們在寫小程序的時候經常會遇到彈出層的效果而現有官網提供的跳轉方法多數是不支持參數傳遞的。
  • 微信小程序課程教與學(教學大綱)
    微信小程序開發實戰（52課時版）本教學大綱適合《微信小程序開發實戰》，可以單獨使用，也可以作為實驗教材配合《微信小程序開發零基礎入門》一書使用。《微信小程序開發項目實戰》作為實驗輔導教材。5種切換方法；l  掌握動畫的聲明、描述和導出步驟；l  掌握頁面位置的返回功能；l  掌握在畫布中繪製圖像、設置樣式、變形、剪裁以及圖片導出等功能；（可節選）l  掌握下拉刷新的啟動、監聽和停止方法。
  • 微信小程序 頁面
    Page(Object object)註冊小程序中的一個頁面。
  • 徹底看懂微信小程序
    就好比是你的簡歷，上面寫了名字、畢業時間等，而小程序的json會記錄一些信息：導航欄背景顏色、導航欄標題顏色、導航欄標題文字內容、窗口的背景色、下拉背景字體、loading圖的樣式、是否開啟下拉刷新、頁面整體能不能上下滾動。.wxml是頁面的基本骨架。就像骨架規定了人的大概模樣一般，wxml是一種類xml的結構化文本，描述了小程序頁面有哪些元素。
  • 微信小程序1萬字實操指南
    app.json 是可以配置整個程序的底部導航 tab、導航欄的背景顏色（貌似不能弄成圖片，如果希望做成京東 app 超級品牌日那種全屏氛圍渲染，建議banner 圖片上半部分使用漸變色過渡到你配置的狀態欄背景顏色）、導航欄標題、導航欄顏色、是否支持下拉刷新等。
  • 微信小程序開發教程,零基礎入門小程序雲開發視頻
    微信小程序開發教程，零基礎入門小程序雲開發，培訓課程視頻講座內容介紹
  • 9000字實操指南:換個姿勢深入微信小程序
    就好比是你的簡歷，上面寫了名字、畢業時間等，而小程序的 json會記錄一些信息：導航欄背景顏色、導航欄標題顏色、導航欄標題文字內容、窗口的背景色、下拉背景字體、loading 圖的樣式、是否開啟下拉刷新、頁面整體能不能上下滾動。.wxml 是頁面的基本骨架。
  • 官方回應微信朋友圈無法刷新 這是怎麼回事?
    導語：21日，部分用戶表示，微信朋友圈無法刷新，下拉操作後一直處於加載狀態。與此同時，也有用戶稱一切正常。對此，騰訊微信團隊回應稱，正在緊急修復中。微信的作用相信大家都會知道的，畢竟微信對於我們來說，也是十分重要的，現在不少百姓都會使用微信，所以微信用戶也是越來越多了。不過近日，有用戶稱微信無法刷新朋友圈，這是怎麼回事？目前官方回應微信朋友圈無法刷新一事了。
  • 微信小程序聲量漸微 有限搜索能力扼殺使用意願
    可能有人會說，屏幕下拉，加載刷新就可以顯示更多小程序，為什麼一定要限制小程序顯示的數量呢？筆者以為這個擔心是多餘的，理由有二點：以目前市場上小程序的數量，還不足以支撐所有關鍵詞的小程序顯示全部，有些關鍵詞的搜索結果還不一定能超過10條。
  • Pull to refresh丨被忽視的下拉刷新原來有這麼多種玩法
    下拉刷新屬於「划動」這個動作，相對於產品的主功能，下拉刷新是一個小功能，但在一些產品中它又是必需的功能。iOS和Android用戶對上圖 App 這樣的更新方式一定不陌生：用手指拖住屏幕往下一拉，App滑出一段特定內容並刷新當前頁面。
  • 微信小程序開發系列一：微信小程序的申請和開發環境的搭建
    我最近也剛剛開始微信小程序的開發，想把我自學的一些心得寫出來分享給大家。這是第一篇，從零開始學習微信小程序開發。主要是小程序的註冊和開發環境的搭建。首先我們要在下列網址申請一個屬於自己的微信小程序：https://mp.weixin.qq.com/cgi-bin/wx點擊按鈕「前往註冊」。注意我們需要使用一個沒有註冊過微信小程序或者微信公眾號的郵箱。我用的是網易郵箱。註冊之後，郵箱會收到一封激活郵件。激活之後，就可以進入小程序主體信息登記頁面了。
  • 微信小程序開發系列教程三：微信小程序的調試方法
    微信小程序開發系列教程這個教程的前兩篇文章，介紹了如何用下圖所示的微信開發者工具自動生成一個Hello World的微信小程序，並講解了這個自動生成的微信小程序的視圖開發原理。這個系列的下一步，會繼續介紹這個微信小程序的控制器index.js的實現。
  • 小白PM跟我來:一篇文章教你玩透「加載」
    比如打開APP，比如點擊按鈕，比如下拉刷新。STEP 3：對於某一操作的操作反饋。比如點擊按鈕時，按鈕的顏色會改變；比如下拉時，頁面會隨著手勢下滑STEP 4：「加載」。在加載過程中，完成「用戶狀態A」到「用戶狀態B」的跳轉。
  • 微信小程序教程入門篇_微信小程序開發
    一、怎麼創建微信小程序1、申請小程序帳號有認證的微信公眾號就在後臺直接快速註冊生成一個小程序，10分鐘左右就可以申請下來。如果是全新申請的小程序就需要單獨繳納300元認證費用。2、第三方小程序生成平臺，綁定授權小程序，選擇模板，編輯 小程序內容；3、上傳小程序代碼，微信審核通過即可發布上線。
  • 微信小程序「反編譯」實戰(二):源碼還原
    在上一篇文章《微信小程序「反編譯」實戰（一）：解包》中，我們詳細介紹了如何獲取某一個小程序的 .wxapkg 包，以及分析了 .wxapkg 包的結構
  • 騰訊NEXT團隊微信小程序開發課程
    -MINA框架講解.mp4第25講-小程序運行機制.mp4第26講-小程序加載機制.mp4第27講-生命周期.mp4第28講-頁面路由.mp4第29講-小程序事件流.mp4第30講-view容器.mp4第31講-scroll-view滾動容器.mp4第32講-swiper滑塊容器.mp4
  • 小程序雲端解決方案,微信小程序及後臺交互架構
    4月 28日，騰訊雲舉辦的雲 +社區技術沙龍，以小程序開發實戰為基準點，圍繞小程序雲上解決方案，serverless後端架構，小遊戲底層設計和直播、電商小程序的開發實戰五大主題內容，分享最全面的微信小程序設計開發思路以及解決方案。本文整理了講師演講精彩內容.
  • 調試實戰 —— dll 加載失敗之全局變量初始化篇
    dumpbin-exports使用 process explorer 觀察 dll 加載情況，發現只加載了一個 dll，沒發現另外一個 dll。使用 windbg 打開要運行的程序，在命令窗口輸入 bm GlobalVariableInitializeOrderDll2!_CRT_INIT ，埋伏好斷點後執行 g 命令繼續運行。
  • 微信小程序頁面加載完成前禁止操作或點其他頁面
    重點來了：如果這時候不設置加載完頁面，或者還未拿到userid的情況下，用戶點其他頁面是沒有數據的，是不顯示的，這樣會導致很嚴重的問題，整個小程序都無法使用了。這時候我們使用wx.showLoading，再配合setTimeout，就能輕鬆實現。
  • 好用的小程序太少?不如試一下這個App
    作者：小程序與 APP 端相比，有著輕巧方便的優勢，符合「用完即走」的理念。和簡單的網頁端相比，它又有著微信的各種接口支持，比如微信支付等。但由於各種限制，有些 APP 並沒有推出小程序。如果你不想使用 APP，或者有些網站沒有相應的小程序，不如來試一下 Hermit。Hermit 可以把任意網頁轉化成輕應用，輕應用不僅可以放到桌面，而且還能像普通應用一樣顯示在後臺，並進行深度功能定製，在易用性方面要勝過網頁端。