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
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...