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
  • （開源）都進來！簡單易懂、功能強大的許可權+可視化流程管理系統
    1、預覽地址：http://139.155.137.144:9012 2、qq群:801913255 一、前言 隨著網路的發展，企業對於信息系統數據的保密工作愈發重視，不同身份、角色對於數據的訪問許可權都應該大相徑庭。 列如 1、不同登錄人員對一個數據列表的可見度是不一樣的，如數據列、數據行、數據按鈕 ...
  • 設計模式-C#實現簡單工廠模式
    前言 上一篇文章寫瞭如何使用RabbitMQ做個簡單的發送郵件項目，然後評論也是比較多，也是準備去學習一下如何確保RabbitMQ的消息可靠性，但是由於時間原因，先來說說設計模式中的簡單工廠模式吧！ 在瞭解簡單工廠模式之前，我們要知道C#是一款面向對象的高級程式語言。它有3大特性，封裝、繼承、多態。 ...
  • Nodify學習 一：介紹與使用
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 介紹 Nodify是一個WPF基於節點的編輯器控制項，其中包含一系列節點、連接和連接器組件，旨在簡化構建基於節點的工具的過程 ...
  • 使用C#/.NET解析Wiki百科數據實現獲取歷史上的今天
    創建一個webapi項目做測試使用。 創建新控制器，搭建一個基礎框架，包括獲取當天日期、wiki的請求地址等 創建一個Http請求幫助類以及方法，用於獲取指定URL的信息 使用http請求訪問指定url，先運行一下，看看返回的內容。內容如圖右邊所示，實際上是一個Json數據。我們主要解析 大事記 部 ...
  • .NET科普：.NET簡史、.NET Standard以及C#和.NET Framework之間的關係
    最近在不少自媒體上看到有關.NET與C#的資訊與評價，感覺大家對.NET與C#還是不太瞭解，尤其是對2016年6月發佈的跨平臺.NET Core 1.0，更是知之甚少。在考慮一番之後，還是決定寫點東西總結一下，也回顧一下.NET的發展歷史。 首先，你沒看錯，.NET是跨平臺的，可以在Windows、 ...
  • Nodify學習 二：添加節點
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 添加節點（nodes） 通過上一篇我們已經創建好了編輯器實例現在我們為編輯器添加一個節點 添加model和viewmode ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（上）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
  • C# 使用模式匹配的好處,因為好用所以推薦~
    類型檢查和轉換：當你需要檢查對象是否為特定類型，並且希望在同一時間內將其轉換為那個類型時，模式匹配提供了一種更簡潔的方式來完成這一任務，避免了使用傳統的as和is操作符後還需要進行額外的null檢查。 複雜條件邏輯：在處理複雜的條件邏輯時，特別是涉及到多個條件和類型的情況下，使用模式匹配可以使代碼更 ...
  • 推薦一種批量判斷文件是否存在的快速辦法
    在日常開發中，我們經常需要和文件打交道，特別是桌面開發，有時候就會需要載入大批量的文件，而且可能還會存在部分文件缺失的情況，那麼如何才能快速的判斷文件是否存在呢？如果處理不當的，且文件數量比較多的時候，可能會造成卡頓等情況，進而影響程式的使用體驗。今天就以一個簡單的小例子，簡述兩種不同的判斷文件是否... ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（中）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
所有分類