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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類