03 uniapp/微信小程式 項目day03

来源:https://www.cnblogs.com/heymar/archive/2022/11/08/16868652.html
-Advertisement-
Play Games

一.商品列表 1.1 獲取數據 首先能夠進入商品列表的途徑 傳的數據有 瞭解了這個之後就可以開始了,先創建分支 創建編譯模式,並分配初試數據 這個時候就可以獲取數據了 需要的數據 所以在發起請求之前需要整理一下數據,先定義數據 整理數據發起請求 1.2 渲染頁面 ==註意我們可以去定義一個預設的圖片 ...


一.商品列表

1.1 獲取數據

首先能夠進入商品列表的途徑

image-20220818180220982

image-20220818180236956

image-20220818180254182

傳的數據有

image-20220818180310650

image-20220818180328519

image-20220818180336127

瞭解了這個之後就可以開始了,先創建分支

創建編譯模式,並分配初試數據

image-20220818180506771

這個時候就可以獲取數據了

需要的數據

image-20220818180823305

所以在發起請求之前需要整理一下數據,先定義數據

image-20220818180950897

整理數據發起請求

image-20220818182243282

1.2 渲染頁面

註意我們可以去定義一個預設的圖片在data,如果當前這個圖片沒有就為預設圖片

image-20220818183356498

image-20220818183401052

1.3 item封裝自定義組件

創建組件

image-20220818184821739

新建插件

image-20220818184848921

然後將我們的結構複製過來,樣式也複製過來

image-20220818185020932

然後就是組件利用方面,既然封裝的是item組件,就要提現item組件的復用性,所以item這個組件必然是在父組件裡面被vfor的

所以遍歷應該在父組件這邊就完成,那麼給子組件得到的數據就是每一個具體的goods,就可以先去改造子組件了

記得將預設圖片也放在子組件

image-20220818185836724

父組件的改造

image-20220818185922649

然後子組件這邊要接受

image-20220818185942847

註意props的簡寫形式,直接在後面為一個數組

image-20220818190639474

1.4 過濾器處理價格

回顧一下vue的過濾器

首先關鍵字filters

然後裡面是一個函數形式,靠的是返回值,傳進來的參數是等會要用的地方的插值語法的參數

image-20220818191043338

用的時候通過一個管道符連接,前面的值就相當於參數

image-20220818191159601

1.5 上拉載入更多

首先修改我們的下拉觸底的距離

註意,在uniapp裡面沒有單獨的json文件,所以所有的頁面的json修改都在同體的pages.json裡面,對應的下麵有一個對象這個就是他單獨的json配置

image-20220818193600918

image-20220818193706129

然後在這個分包的下拉觸底事件來操作

下拉刷新一次,就將頁碼加一頁,同時請求數據裡面也要改造一下,賦值我們的列表數據,需要 進行一個擴展運算符的融合

image-20220818194134956

然後解決兩個下拉觸底經典問題

第一個是節流閥的問題,不能托底過快導致請求好幾次數據

聲明一個節流閥

image-20220818194355352

為什麼放在下麵表示數據請求完畢了才讓他為fasle的,因為這是await,所以只有返回成功了才會進入下一步

image-20220818194629464

然後下拉觸底事件判斷

為true就出去,因為為true表示正在請求數據

image-20220818194734773

第二個問題是:數據刷新完畢不應該再發起數據請求

這裡也有一個公式 當前頁×每頁展示數據大於等於總數據的話就說明到頭了不能請求數據了

image-20220818195351505

1.6 上拉刷新

首先還是先開啟上拉刷新

image-20220818200336355

然後在上拉刷新事件做處理

然後有一個很關鍵的步驟重新獲取數據,我會傳一個回調,來關閉下拉刷新效果

image-20220818200553206

記住這種形式,用短路運算來判斷有無回調,有就執行,沒得就不執行

image-20220818200633577

1.6.1 存在問題 上拉刷新回調無效

1.7 跳轉商品詳情頁面

將block組件改為view組件,綁定click事件

image-20220818202430468

image-20220818202545036

二.商品詳情

首先創建分支並創建編譯模式

image-20220822135233083

然後發起請求

一樣的data定義數據,onload發起函數調用,methods定義請求函數

image-20220822135618242

然後數據賦值

image-20220822135730220

2.1 輪播圖效果

定義輪播圖結構

image-20220822140914808

然後實現輪播圖預覽效果

用到uni的一個api previewImage,需要當前照片的索引,第二個參數是一個數組,裡面每一項為照片的url地址

image-20220822162321420

返回一個新數組,並且返回的值為每一張big照片

image-20220822162456727

2.2 商品信息區

定義ui結構,並渲染

image-20220822163553776

image-20220822163705762

2.3 商品詳情頁

這裡由於伺服器返回的是直接帶html標簽的一串文本,所以這類要用到小程式專門用來解析html字元串的組件富文本rich-text

裡面有一個nodes屬性為字元串即可

image-20220822170929474

問題1:

中間會有空隙

其根本原因還是因為 img標簽為行內塊的原因,這裡應該把img都變成block

image-20220822171705992

採用的方法是replace來替換

註意前面如果要加g/i等參數表示是這個

image-20220822173349868

問題2:

價格在刷新一瞬間為undefined的問題

直接條件渲染即可

image-20220822173500686

2.4 商品導航區

有現成的組件,通過 uni-goods-nav這個組件來使用

首先需要定義數據

image-20220822175523352

options表示左邊的按鈕區域,buttongroup表示右邊的區域

然後他的組件寫上來

image-20220822175653697

image-20220822175657968

將其固定定位,並記得整個父盒子有個padding-bottom

關於他的點擊事件

click表示左邊的區域點擊事件,buttonclick表示右邊的區域點擊事件

image-20220822175904974

裡面接受一個形參e,可以拿到你點擊的這個區域的一些信息

image-20220822180204609


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2022年11月7日,Taier1.3版本正式發佈! Taier 是一個大數據分散式可視化的DAG任務調度系統,旨在降低ETL開發成本、提高大數據平臺穩定性,大數據開發人員可以在 Taier 直接進行業務邏輯的開發,而不用關心任務錯綜複雜的依賴關係與底層的大數據平臺的架構實現,將工作的重心更多地聚焦 ...
  • 1 背景與目標 1.1 背景 國際財務泰國每月月初賬單任務生成,或者重算賬單數據,數據同步方案為mysql通過binlake同步ES數據,在同步過程中發現計費事件表,計費結果表均有延遲,ES數據與Mysql數據不一致,導致業務頁面查詢數據不准確,部分核心計算通過ES校驗失敗 1.2目標 解決binl ...
  • 好家伙,JS基礎接著學, 本篇內容為《JS高級程式設計》第三章學習筆記 1.變數 ECMAScript 變數是鬆散類型的,意思是變數可以用於保存任何類型的數據。 (確實鬆散,不像C或C++那樣,分int,float,char等等...,一個變數可以用來保存任何類型的數據) 每個變數只不過是一個用於保 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 先上效果 簡易map 在圖一的地圖中可以看到 a點 連接 到 b點, 基本信息 以及 基本的控制項(放大、縮小、回到某個指定的點),接下來我們分開逐步講解。 所需配置 需要先在manifest.json中的 app模塊中配置地圖,並添加相關 ...
  • 函數 基本概念 在JS中,函數實際上是對象,是Function類型的實例。 函數名是指向函數對象的指針。 function sum(num1, num2){ return num1 + num2; } // 檢查sum是否是Function類型的實例 console.log(sum instance ...
  • 1、什麼是CSS Cascading Style Sheet 級聯樣式表。 表現HTML或XHTML文件樣式的電腦語言。 包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定。 2、CSS的發展史 CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式; CSS2.0 ...
  • 虛擬DOM就是用JS來模擬DOM結構的,它並不是真正的DOM。 為什麼使用虛擬DOM? 用傳統的方式去操作DOM的時候,瀏覽器會從構建DOM樹開始,從頭到尾執行一遍流程。簡單來說,就是會觸發重排與重繪。 比如說,在一次操作中,需要更新10個DOM節點。 理想是一次性構建完成DOM樹,但是瀏覽器並不會 ...
  • 一、事件委派 1.理解DOM事件流 事件流描述的是從頁面中接收事件的順序。事件發生時會在元素節點之間按照特定的順序傳播,這個傳播過程即DOM事件流。 DOM事件流分為三個階段: 捕獲階段:從上往下 當前目標階段 冒泡階段:從下往上 事件流如下圖所示: 註意事項: JavaScript代碼中只能執行捕 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...