02 uniapp/微信小程式 項目day02

来源:https://www.cnblogs.com/heymar/archive/2022/09/21/16716598.html
-Advertisement-
Play Games

一.分類 1.1 頁面佈局 首先創建cate的分支 定義基本結構，因為是兩個需要滾動的區域，所以這裡要用到組件 ==scroll== 這個組件如果是y scroll那就要固定高度，x scroll那就要固定寬度 這裡有個問題就是，我們應該把高度限定在整個屏幕高度 這裡用到uniapp一個api == ...


一.分類

image-20220811180412249

1.1 頁面佈局

首先創建cate的分支

image-20220811181909502

定義基本結構，因為是兩個需要滾動的區域，所以這裡要用到組件 scroll

這個組件如果是y scroll那就要固定高度，x scroll那就要固定寬度

image-20220811182137238

這裡有個問題就是，我們應該把高度限定在整個屏幕高度

這裡用到uniapp一個api uni.getSystemInfoSync()他可以獲得很多信息，比如該手機型號、以及平臺、還有整個屏幕寬高以及內容區域寬高等

image-20220811183118618

image-20220811183256663

image-20220811183405538

1.2 一級分類

先獲取數據

image-20220811184237539

然後開始渲染

註意block類似於template不占用空間組件

image-20220811184518481

然後動態active的變化

註意如果是多個class使用數組包起來

image-20220811184741906

然後點擊事件

image-20220811184803197

image-20220811184825786

1.3 二三級分類

二三級分類是跟著一級分類一起來的數據，所以可以在一開始就接收第一個active的數據，再通過改變active的點擊事件來切換列表

image-20220811190207108

image-20220811190238909

然後就可以渲染到頁面

image-20220811190457622

二級分類就出來了

image-20220811190508708

三級分類直接渲染即可

image-20220811190732354

1.4 重置滾動條，跳轉分包

現在的頁面是有一個bug的

image-20220811192525159

當我們瀏覽一半到這裡再次點擊一級分類，會發現還是在這個位置，有點類似於路由的滾動行為

這裡的解決思路是 scroll組件有一個屬性scroll-top 可以定位到豎向滾動條的位置

image-20220811193016573

image-20220811193021587

image-20220811193033641

但是這樣並不會生效，因為我們的scrollTop始終沒變過，所以你給他賦值0，他發現他本來就是0就不會有賦值的操作，頁面也就響應不到

image-20220811193233820

然後點擊三級分類每一項跳轉到分包商品詳情頁去

image-20220811195118194

註意tabBar是用switchTap來跳，分包非tabBar頁面使用navigateTo來跳

image-20220811195526052

1.5 分支合併提交

主要就是記住分支暫存提交推送後，到主分支要先暫存提交，再合併，再來推送

二.搜索

先創建search分支

image-20220816175223527

2.1 自定義搜索組件

image-20220816180335990

uni創建自定義組件

在 uni-modules新建插件

image-20220816175801886

image-20220816180012191

而且不用註冊，直接在頁面使用即可

image-20220816180231873

該效果本質上是在這裡展示用的，當一點擊回調往真正的搜索頁面

image-20220816180415149

這裡如果要把我們的背景顏色和邊框圓角弄成動態的，其實就是vue的props

回憶一下對象寫法

image-20220816182514455

用在組件上，註意屬性名和值都要加引號

註意一下uni提供了一些組件，uniui在官方文檔上

image-20220816182746852

接下來回顧一下自定義事件，也就是我們怎麼讓頁面點擊這個組件我們跳轉到搜索頁面

綁定自定義事件

image-20220816184552916

image-20220816183659404

組件通過emit，規定觸發的時機以及發送數據

image-20220816183742497

image-20220816183813635

2.1.1 導航跳轉與吸頂效果

首先導航跳轉

先創建一個分包

image-20220816190954750

然後跳轉非tabBar用navigateTO

image-20220816191137615

然後再home頁面也需要一個

image-20220816191643533

image-20220816191710495

但是在這個頁面就出現了問題，會跟著頁面飄起走

image-20220816191831348

之所以cate頁面沒出現是因為它是用的scroll組件，他有滾動條，超出了就滾動條往下走了，所以search組件就可以一直在那裡，但是還需要完善一下

用我們之前cate計算出來的高度減去search組件的高度

image-20220816192042996

然後解決首頁這個問題，將它設置為sticky定位即可

image-20220816192559793

2.2 搜索建議

搜索頁面的基本結構，這裡有用到一個uni的組件有專門的搜索欄search-bar

image-20220816194607983

然後將取消按鈕刪除，去掉一些不必要的事件

image-20220816195101183

image-20220816195127494

要修改背景顏色要去這個組件內部去修改

image-20220816195304241

然後要讓他一進來就獲取焦點也是在內部去改，將兩個都改為true

image-20220816195428183

該組件的input事件會受到參數e也就是輸入的值

image-20220816195630969

image-20220816195642869

image-20220816195709342

image-20220816195714884

很明顯這裡要做一個防抖處理

image-20220816195911107

2.2.1 根據關鍵詞搜索列表

這裡的思路是這樣的，在防抖裡面調用一個獲取搜索列表的函數，在這個函數裡面應該先判斷一下kw也就是輸入的關鍵詞是否是空，如果為空就讓列表為空並退出迴圈否則就正常走，發起請求並給到數組

image-20220816200638311

，image-20220816201113454

然後渲染到頁面上

image-20220816201259859

同時跳轉到商品詳情頁面

image-20220816201425149

2.3 搜索歷史

先定義好ui結構

image-20220817182332714

來點假數據

image-20220817182634274

然後搜索建議列表和搜索歷史應該條件渲染

image-20220817182825003

image-20220817182923317

2.3.1 搜索歷史列表處理

同樣還是input事件

image-20220817185629089

但是有兩個問題

image-20220817185723448

一個是最新搜索的應該放在前面：

這裡不改變push的用法的前提下，需要用計算節點來做，因為reverse會改變原數組，容易出差錯，而且要淺拷貝一下也是怕把原數組改變到了

image-20220817190053184

還有一個問題就是我們搜重覆的會顯示兩個在上面：

image-20220817191942805

這樣做雖然可以去重操作，但是有一個問題 就是我們如果已經搜索了一個a，在最後面，在搜索一次a，雖然不會上去重覆的，但是這個時候a應該在最前面去這樣做的話這個a還是在最後面

其原因是因為原本結構是這樣

image-20220817192130288

頁面呈現是這樣

image-20220817192140793

這個時候你輸入a，先push進去，然後set發現重覆，就直接刪除了新進來的這個a，相當於沒有變化，所以也不會引起計算屬性reverse的變化，也就導致了你就算搜了一次a他也沒有到最前面來

正確的做法應該這樣

去掉我們原來的push，當我們input之後先創建一個set結構，用她的delete方法刪除原來的，在add添加新的，這樣結構也就變了，就算有重覆的也會被刪去重覆的，而且最重要的是，新搜索的會在前面

image-20220817192628149

持久化存儲搜索建議列表

大體思路是在我們存儲進historyList的時候變成json字元串也保存進storage，用到uni的一個api uni.setStorageSync

image-20220817193936228

然後在onload生命鉤子中去獲取，註意要考慮沒有的情況，就為一個空的字元串數組

image-20220817194245827

2.3.2 清空搜索歷史記錄

綁定事件

image-20220817194634391

需要將列表清空，同時記得移除storage裡面的數據

image-20220817194702688

2.3.3 點擊搜索歷史跳轉

image-20220817195013872


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

-Advertisement-
Play Games
更多相關文章
  • 一條sql瞭解MYSQL的架構設計
    對於一個服務端開發來說 MYSQL 可能是他使用最熟悉的資料庫工具，然而，大部分的Java工程師對MySQL的瞭解和掌握程度，大致就停留在這麼一個階段:它可以建庫、建表、建索引，然後就是對裡面的數據進行增刪改查，語句性能有點差？沒關係，在表裡建幾個索引或者調整一下查詢邏輯就可以了，一條sql，MYS... ...
  • PostgreSQL邏輯複製解密
    在數字化時代的今天，我們都認同數據會創造價值。為了最大化數據的價值，我們不停的建立著數據遷移的管道，從同構到異構，從關係型到非關係型，從雲下到雲上，從數倉到數據湖，試圖在各種場景挖掘數據的價值。而在這縱橫交錯的數據網路中，邏輯複製扮演著及其重要的角色。 讓我們將視角從複雜的網路拉回其中的一個端點，... ...
  • 日本開放Wi-Fi 6E認證
    2022年9月2日，日本MIC（総務省）發佈了“電波法施行規則等の一部を改正する省令（令和4年総務省令第59號）”省令，更新了Wi-Fi 6E Band 5頻帶5925 ~ 6425 MHz的技術要求。隔天（9月3日），日本DSP機構發佈了“「6GHz帯小電力データ通信システム」の特性試験方法”，為 ...
  • Android12申請藍牙許可權說明
    AU上傳ipa出現下圖紅框提示說明成功上傳，如果App Store後臺沒有出現構建版本， 請登錄 apple賬號對應的郵箱查看反饋，特別留意垃圾郵箱，無論成功還是失敗，apple都會發郵件 一、首先登錄iTunes Connect 後臺、查看ipa構建情況 https://appstoreconne ...
  • 如何用AR Engine開發一個虛擬形象表情包？
    現如今，人們在網上聊天、發帖時越來越愛用表情包，表情包一方面是一種個性化的表達方式，另一方面更能傳達出當下的心理活動，可以說在網路社交中表情包是一個不可或缺的存在。加上近年來元宇宙的興起，3D虛擬形象廣泛應用，用戶可以通過自己的表情來控制虛擬形象的表情，做一系列專屬的表情包，更加生動形象。 那麼，如 ...
  • vue+element-ui後臺管理系統模板
    ##vue+element-ui後臺管理系統模板 前端：基於vue2.0+或3.0+加上element-ui組件框架 後端：springboot+mybatis-plus寫介面 通過Axios調用介面完成數據傳遞 通過router路由完成各頁面的跳轉 ###全局配置 App.vue <templat ...
  • Html飛機大戰(十七): 優化移動端
    好家伙，繼續優化， 好家伙，我把我的飛機大戰發給我的小伙伴們玩 期待著略微的贊賞之詞，然後他們用手機打開我的給他們的網址 然後點一下飛機就炸了。 游戲體驗零分 （滑鼠點擊在移動端依舊可以生效） 好了所以我們來優化一下這個觸屏移動事件 由於沒有參考，就去翻文檔了 觸摸事件分三個：touchstart、 ...
  • 記錄--通過手寫，分析Promise核心原理
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. 定義整體結構 先寫出構造函數，將Promise向外暴露 /* 自定義Promise函數模塊：IIFE */ (function (window) { /* Promise構造函數 executor:執行器函數 */ function ...
一周排行
    -Advertisement-
    Play Games
  • Spectre.Console-實現自己的CLI
    ## 引言 最近發現自己喜歡用的 Todo 軟體總是差點意思，畢竟每個人的習慣和工作流不太一樣，我就想著自己寫一個小的[Todo 項目]( https://github.com/circler3/TodoTrack )，核心的功能是自動記錄 Todo 執行過程中消耗的時間（尤其面向程式員），按照自己 ...
  • 在 Net Core 開發中如何解決 Cannot access a disposed object 這個問題
    ### 前言 當我們編寫 C# 代碼時，經常需要處理大量的數據集合。在傳統的方式中，我們往往需要先將整個數據集合載入到記憶體中，然後再進行操作。但是如果數據集合非常大，這種方式就會導致記憶體占用過高，甚至可能導致程式崩潰。 C# 中的`yield return`機制可以幫助我們解決這個問題。通過使用`y ...
  • Ado.Net 資料庫訪問技術(.Net 6版本)
    1. ADO.NET的前世今生 ADO.NET的名稱起源於ADO（ActiveX Data Objects），是一個COM組件庫，用於在以往的Microsoft技術中訪問數據。之所以使用ADO.NET名稱，是因為Microsoft希望表明，這是在NET編程環境中優先使用的數據訪問介面。 ADO.NE ...
  • 第一單元 單元測試
    1. 為什麼需要單元測試 在我們之前，測試某些功能是否能夠正常運行時，我們都將代碼寫到Main方法中，當我們測試第二個功能時，我們只能選擇將之前的代碼清掉，重新編寫。此時，如果你還想重新測試你之前的功能時，這時你就顯得有些難為情了，因為代碼都被你清掉了。當然你完全可以把代碼寫到一個記事本中進行記錄， ...
  • 開源.NetCore通用工具庫Xmtool使用連載 - 發送簡訊篇
    1. 透過現象看本質 反射被譽為是 c#中的黑科技 ，在很多領域中都有反射的身影，例如，我們經常使用的ORM框架，ABP框架 等。 反射指程式可以訪問、檢測和修改它本身狀態或行為的一種能力。. 程式集包含模塊，而模塊包含類型，類型又包含成員。. 反射則提供了封裝程式集、模塊和類型的對象。. 您可以使 ...
  • Rust Web 全棧開發之 Web Service 中的錯誤處理
    # Rust Web 全棧開發之 Web Service 中的錯誤處理 ## Web Service 中的統一錯誤處理 ### Actix Web Service 自定義錯誤類型 -> 自定義錯誤轉為 HTTP Response - 資料庫 - 資料庫錯誤 - 串列化 - serde 錯誤 - I/ ...
  • Java中泛型詳解，非常詳細
    在前面的幾篇文章中，詳細地給大家介紹了Java里的集合。但在介紹集合時，我們涉及到了泛型的概念卻並沒有詳細學習，所以今天我們要花點時間給大家專門講解什麼是泛型、泛型的作用、用法、特點等內容 ...
  • BIO、NIO、AIO區別詳解
    ###BIO：同步阻塞 主線程發起io請求後，需要等待當前io操作完成，才能繼續執行。 ###NIO：同步非阻塞 引入selector、channel、等概念，當主線程發起io請求後，輪詢的查看系統是否準備好執行io操作，沒有準備好則主線程不會阻塞會繼續執行，準備好主線程會阻塞等待io操作完成。 # ...
  • StampedLock：高併發場景下一種比讀寫鎖更快的鎖
    摘要：在讀多寫少的環境中，有沒有一種比ReadWriteLock更快的鎖呢？有，那就是JDK1.8中新增的StampedLock！ 本文分享自華為雲社區《【高併發】高併發場景下一種比讀寫鎖更快的鎖》，作者： 冰 河。 什麼是StampedLock? ReadWriteLock鎖允許多個線程同時讀取共 ...
  • Golang掃盲式學習——GO併發 | （一）
    ## 併發與並行😣 ### 併發與並行的概念和區別 並行：同一個時間段內多個任務同時在不同的CPU核心上執行。強調同一時刻多個任務之間的”**同時執行**“。 併發：同一個時間段內多個任務都在進展。強調多個任務間的”**交替執行**“。 ![](https://img2023.cnblogs.co ...
所有分類