一.分類
1.1 頁面布局
首先創建cate的分支
定義基本結構，因為是兩個需要滾動的區域，所以這里要用到組件 scroll
這個組件如果是y scroll那就要固定高度，x scroll那就要固定寬度
這里有個問題就是，我們應該把高度限定在整個螢屏高度
這里用到uniapp一個api uni.getSystemInfoSync()他可以獲得很多資訊，比如該手機型號、以及平臺、還有整個螢屏寬高以及內容區域寬高等
1.2 一級分類
先獲取資料
然后開始渲染
注意block類似于template不占用空間組件
然后動態active的變化
注意如果是多個class使用陣列包起來
然后點擊事件
1.3 二三級分類
二三級分類是跟著一級分類一起來的資料，所以可以在一開始就接收第一個active的資料，再通過改變active的點擊事件來切換串列
然后就可以渲染到頁面
二級分類就出來了
三級分類直接渲染即可
1.4 重置滾動條，跳轉分包
現在的頁面是有一個bug的
當我們瀏覽一半到這里再次點擊一級分類，會發現還是在這個位置，有點類似于路由的滾動行為
這里的解決思路是 scroll組件有一個屬性scroll-top 可以定位到豎向滾動條的位置
但是這樣并不會生效，因為我們的scrollTop始終沒變過，所以你給他賦值0，他發現他本來就是0就不會有賦值的操作，頁面也就回應不到
然后點擊三級分類每一項跳轉到分包商品詳情頁去
注意tabBar是用switchTap來跳，分包非tabBar頁面使用navigateTo來跳
1.5 分支合并提交
主要就是記住分支暫存提交推送后，到主分支要先暫存提交，再合并，再來推送
二.搜索
先創建search分支
2.1 自定義搜索組件
uni創建自定義組件
在 uni-modules新建插件
而且不用注冊，直接在頁面使用即可
該效果本質上是在這里展示用的，當一點擊回呼往真正的搜索頁面
這里如果要把我們的背景顏色和邊框圓角弄成動態的，其實就是vue的props
回憶一下物件寫法
用在組件上，注意屬性名和值都要加引號
注意一下uni提供了一些組件，uniui在官方檔案上
接下來回顧一下自定義事件，也就是我們怎么讓頁面點擊這個組件我們跳轉到搜索頁面
系結自定義事件
組件通過emit，規定觸發的時機以及發送資料
2.1.1 導航跳轉與吸頂效果
首先導航跳轉
先創建一個分包
然后跳轉非tabBar用navigateTO
然后再home頁面也需要一個
但是在這個頁面就出現了問題，會跟著頁面飄起走
之所以cate頁面沒出現是因為它是用的scroll組件，他有滾動條，超出了就滾動條往下走了，所以search組件就可以一直在那里，但是還需要完善一下
用我們之前cate計算出來的高度減去search組件的高度
然后解決首頁這個問題，將它設定為sticky定位即可
2.2 搜索建議
搜索頁面的基本結構，這里有用到一個uni的組件有專門的搜索欄search-bar
然后將取消按鈕洗掉，去掉一些不必要的事件
要修改背景顏色要去這個組件內部去修改
然后要讓他一進來就獲取焦點也是在內部去改，將兩個都改為true
該組件的input事件會受到引數e也就是輸入的值
很明顯這里要做一個防抖處理
2.2.1 根據關鍵詞搜索串列
這里的思路是這樣的，在防抖里面呼叫一個獲取搜索串列的函式，在這個函式里面應該先判斷一下kw也就是輸入的關鍵詞是否是空，如果為空就讓串列為空并退出回圈否則就正常走，發起請求并給到陣列
，
然后渲染到頁面上
同時跳轉到商品詳情頁面
2.3 搜索歷史
先定義好ui結構
來點假資料
然后搜索建議串列和搜索歷史應該條件渲染
2.3.1 搜索歷史串列處理
同樣還是input事件
但是有兩個問題
一個是最新搜索的應該放在前面：
這里不改變push的用法的前提下，需要用計算節點來做，因為reverse會改變原陣列，容易出差錯，而且要淺拷貝一下也是怕把原陣列改變到了
還有一個問題就是我們搜重復的會顯示兩個在上面：
這樣做雖然可以去重操作，但是有一個問題 就是我們如果已經搜索了一個a，在最后面，在搜索一次a，雖然不會上去重復的，但是這個時候a應該在最前面去這樣做的話這個a還是在最后面
其原因是因為原本結構是這樣
頁面呈現是這樣
這個時候你輸入a，先push進去，然后set發現重復，就直接洗掉了新進來的這個a，相當于沒有變化，所以也不會引起計算屬性reverse的變化，也就導致了你就算搜了一次a他也沒有到最前面來
正確的做法應該這樣
去掉我們原來的push，當我們input之后先創建一個set結構，用她的delete方法洗掉原來的，在add添加新的，這樣結構也就變了，就算有重復的也會被刪去重復的，而且最重要的是，新搜索的會在前面
持久化存盤搜索建議串列
大體思路是在我們存盤進historyList的時候變成json字串也保存進storage，用到uni的一個api uni.setStorageSync
然后在onload生命鉤子中去獲取，注意要考慮沒有的情況，就為一個空的字串陣列
2.3.2 清空搜索歷史記錄
系結事件
需要將串列清空，同時記得移除storage里面的資料
2.3.3 點擊搜索歷史跳轉
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509273.html
標籤：其他