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
更多相關文章
  • 對於一個服務端開發來說 MYSQL 可能是他使用最熟悉的資料庫工具,然而,大部分的Java工程師對MySQL的瞭解和掌握程度,大致就停留在這麼一個階段:它可以建庫、建表、建索引,然後就是對裡面的數據進行增刪改查,語句性能有點差?沒關係,在表裡建幾個索引或者調整一下查詢邏輯就可以了,一條sql,MYS... ...
  • 在數字化時代的今天,我們都認同數據會創造價值。為了最大化數據的價值,我們不停的建立著數據遷移的管道,從同構到異構,從關係型到非關係型,從雲下到雲上,從數倉到數據湖,試圖在各種場景挖掘數據的價值。而在這縱橫交錯的數據網路中,邏輯複製扮演著及其重要的角色。 讓我們將視角從複雜的網路拉回其中的一個端點,... ...
  • 2022年9月2日,日本MIC(総務省)發佈了“電波法施行規則等の一部を改正する省令(令和4年総務省令第59號)”省令,更新了Wi-Fi 6E Band 5頻帶5925 ~ 6425 MHz的技術要求。隔天(9月3日),日本DSP機構發佈了“「6GHz帯小電力データ通信システム」の特性試験方法”,為 ...
  • AU上傳ipa出現下圖紅框提示說明成功上傳,如果App Store後臺沒有出現構建版本, 請登錄 apple賬號對應的郵箱查看反饋,特別留意垃圾郵箱,無論成功還是失敗,apple都會發郵件 一、首先登錄iTunes Connect 後臺、查看ipa構建情況 https://appstoreconne ...
  • 現如今,人們在網上聊天、發帖時越來越愛用表情包,表情包一方面是一種個性化的表達方式,另一方面更能傳達出當下的心理活動,可以說在網路社交中表情包是一個不可或缺的存在。加上近年來元宇宙的興起,3D虛擬形象廣泛應用,用戶可以通過自己的表情來控制虛擬形象的表情,做一系列專屬的表情包,更加生動形象。 那麼,如 ...
  • ##vue+element-ui後臺管理系統模板 前端:基於vue2.0+或3.0+加上element-ui組件框架 後端:springboot+mybatis-plus寫介面 通過Axios調用介面完成數據傳遞 通過router路由完成各頁面的跳轉 ###全局配置 App.vue <templat ...
  • 好家伙,繼續優化, 好家伙,我把我的飛機大戰發給我的小伙伴們玩 期待著略微的贊賞之詞,然後他們用手機打開我的給他們的網址 然後點一下飛機就炸了。 游戲體驗零分 (滑鼠點擊在移動端依舊可以生效) 好了所以我們來優化一下這個觸屏移動事件 由於沒有參考,就去翻文檔了 觸摸事件分三個:touchstart、 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 1. 定義整體結構 先寫出構造函數,將Promise向外暴露 /* 自定義Promise函數模塊:IIFE */ (function (window) { /* Promise構造函數 executor:執行器函數 */ function ...
一周排行
    -Advertisement-
    Play Games
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...