Header組件熱門搜索欄的實(shí)現(xiàn)示例
1. 基本布局
本次任務(wù)是實(shí)現(xiàn)熱門搜索模塊的布局和展示控制功能。
1.1 熱門搜索框
在布局過(guò)程中,我們發(fā)現(xiàn)熱門搜索框并沒(méi)有出現(xiàn)。這可能是由于外部組件存在 overflow: hidden
屬性導(dǎo)致的,因此我們需要給一個(gè)高度解決這個(gè)問(wèn)題:
cssCopy code export const SearchInfo = styled.div` position: absolute; left: 0; top: 56px; width: 240px; height: 100px; padding: 0 20px; background: green; `;
接下來(lái),我們通過(guò)簡(jiǎn)書官網(wǎng)調(diào)試的方法補(bǔ)全其他屬性。
1.2 熱門搜索Title和換一換圖標(biāo)
接下來(lái),我們需要添加熱門搜索Title和換一換圖標(biāo)。
cssCopy code export const SearchInfoTitle = styled.div` margin-top: 20px; margin-bottom: 15px; line-height: 20px; font-size: 14px; color: #969696; `;
然后需要實(shí)現(xiàn)換一換的功能。
1.3 熱門Tag
我們還需要添加熱門Tag的樣式:
cssCopy code export const SearchInfoItem = styled.a` display: block; float: left; line-height: 20px; padding: 0 5px; font-size: 12px; border: 1px solid #ddd; color: #969696; border-radius: 2px; margin-right: 10px; margin-bottom: 15px; `;
但是此時(shí)發(fā)現(xiàn)高度出了問(wèn)題了,因此我們需要在外層布局進(jìn)行修改:
cssCopy code export const SearchWrapper = styled.div` position: relative; float: left; .iconfont { position: absolute; right: 5px; bottom: 5px; width: 30px; height: 30px; line-height: 30px; border-radius: 15px; text-align: center; &.focused { background: #777; color: #fff; } } .slide-enter { transition: all 0.2s ease-out; } .slide-enter-active { width: 240px; } .slide-exit { transition: all 0.2s ease-out; } .slide-exit-active { width: 160px; } `; export const SearchInfo = styled.div` position: absolute; left: 0; top: 56px; width: 240px; padding: 0 20px; background: green; `;
同時(shí),我們將上面 SearchInfo
寫死的高度去掉。
2. 控制展示
官方文檔描述了 SearchInfo 區(qū)域應(yīng)該在鼠標(biāo)聚焦時(shí)顯示,失去焦點(diǎn)時(shí)隱藏。我們可以通過(guò)控制 SearchInfo 區(qū)域來(lái)實(shí)現(xiàn)這個(gè)邏輯,而且這個(gè)控制邏輯與之前用于控制動(dòng)畫的控制參數(shù)非常相似。
3. 使用 Ajax 請(qǐng)求獲取 Tag 數(shù)據(jù)
實(shí)際上,熱門 Tag 的數(shù)據(jù)是從服務(wù)器獲取的。我們希望通過(guò) Ajax 來(lái)獲取這些數(shù)據(jù),就像簡(jiǎn)書網(wǎng)站一樣。而且我們只需要在第一次聚焦時(shí)獲取數(shù)據(jù),然后進(jìn)行本地緩存。
此時(shí),我們需要將 header 中的列表內(nèi)容進(jìn)行存儲(chǔ),以便后續(xù)進(jìn)行狀態(tài)管理。初始時(shí),它是一個(gè)空數(shù)組。
3.1 使用 redux-thunk 返回函數(shù)
當(dāng) Nav 聚焦時(shí),我們需要獲取 Ajax 數(shù)據(jù)。由于這是一個(gè)異步操作,所以需要使用第三方庫(kù)。我們統(tǒng)一使用 redux-thunk 進(jìn)行操作,將異步操作放在 action 中處理。
應(yīng)該在創(chuàng)建 store 時(shí)使用 redux-thunk:
接下來(lái),我們需要派發(fā)異步 action:
然后創(chuàng)建這個(gè) Action:
如果需要使用 Ajax,則需要使用第三方庫(kù) axios 來(lái)實(shí)現(xiàn)異步請(qǐng)求:
import axios from 'axios'; export const getList = () => { return (dispatch) => { // 異步請(qǐng)求 axios.get('/api/headerList.json').then(()=>{ }).catch(()=>{ console.log('error'); }); } };
當(dāng)后端數(shù)據(jù)還未開(kāi)發(fā)完成時(shí),我們可以使用前端制作的假數(shù)據(jù)。我們可以使用 create-react-app 的特性,在 public 和 src 目錄下創(chuàng)建一個(gè)對(duì)應(yīng)的 JSON 文件,然后就可以訪問(wèn)了。在此期間,路由也需要進(jìn)行修改,以便實(shí)現(xiàn)假數(shù)據(jù)。
然后,我們需要修改 state。我們需要在回調(diào)中派發(fā)一個(gè)新的 action:
const changeList = (data) => ({ type: constants.CHANGE_LIST, data }); export const getList = () => { return (dispatch) => { // 異步請(qǐng)求 axios.get('/api/headerList.json').then((res) => { const data = res.data; dispatch(changeList(data.data)) }).catch(()=>{ console.log('error'); }); } };
3.2 使用 Immutable 的數(shù)組進(jìn)行 state 統(tǒng)一更新
接下來(lái),我們需要在 reducer 中根據(jù)獲取的 data 更新 list。但是有一點(diǎn)需要注意:我們使用 fromJS() 方法將 list 變成了一個(gè) Immutable 數(shù)組。但是,當(dāng)我們調(diào)用 state.set() 方法去改變 list 時(shí),action.data 本身是一個(gè)普通的數(shù)組,這兩種數(shù)據(jù)類型不同會(huì)出現(xiàn)錯(cuò)誤。因此,我們需要將 data 轉(zhuǎn)換為 Immutable:
然后,我們可以按如下方式編寫 reducer:
3.3 使用 map 方法循環(huán)展示內(nèi)容
最后,需要將數(shù)據(jù)展示出來(lái)??梢允褂?map 方法來(lái)遍歷數(shù)組,并渲染列表項(xiàng):
javascriptCopy code getListArea(show) { if (show) { return ( <SearchInfo> <SearchInfoTitle> 熱門搜索 <SearchInfoSwitch> 換一批 </SearchInfoSwitch> </SearchInfoTitle> <SearchInfoList> {this.props.list.map((item) => { return <SearchInfoItem key={item}>{item}</SearchInfoItem>; })} </SearchInfoList> </SearchInfo> ); } else { return null; } }
即使是使用 immutable 數(shù)組,也可以使用 map 方法進(jìn)行遍歷。
4. 優(yōu)化 reducer
之前的 reducer 大量使用 if 語(yǔ)句,可以通過(guò)使用 switch-case 進(jìn)行優(yōu)化:
cCopy code export default (state = defaultState, action) => { switch (action.type) { case constants.SEARCH_FOCUS: return state.set('focused', true); case constants.SEARCH_BLUR: return state.set('focused', false); case constants.CHANGE_LIST: return state.set('list', action.data); default: return state; } };
使用 switch-case 可以讓 reducer 代碼更加清晰易懂。
以上就是Header組件熱門搜索欄的實(shí)現(xiàn)示例的詳細(xì)內(nèi)容,更多關(guān)于Header組件熱門搜索欄的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- 詳解Vue后臺(tái)管理系統(tǒng)開(kāi)發(fā)日??偨Y(jié)(組件PageHeader)
- Vue header組件開(kāi)發(fā)詳解
- VSCode多行注釋插件KoroFileHeader使用示例
- Flutter實(shí)現(xiàn)固定header底部滑動(dòng)頁(yè)效果示例
- NSURLSession跨域重定向透?jìng)鱄TTP Header問(wèn)題解決
- Go結(jié)構(gòu)體SliceHeader及StringHeader作用詳解
- 好用的VSCode頭部注釋插件Fileheader?Pro
- resty更新header控制api版本數(shù)據(jù)源讀寫分離
相關(guān)文章
React通過(guò)父組件傳遞類名給子組件的實(shí)現(xiàn)方法
React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。這篇文章主要介紹了React通過(guò)父組件傳遞類名給子組件的方法,需要的朋友可以參考下2017-11-11react-router JS 控制路由跳轉(zhuǎn)實(shí)例
這篇文章主要介紹了react-router JS 控制路由跳轉(zhuǎn)實(shí)例,react實(shí)現(xiàn)路由可以直接使用react-router。有興趣的可以了解一下2017-06-06淺談對(duì)于react-thunk中間件的簡(jiǎn)單理解
這篇文章主要介紹了淺談對(duì)于react-thunk中間件的簡(jiǎn)單理解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05react中關(guān)于Context/Provider/Consumer傳參的使用
這篇文章主要介紹了react中關(guān)于Context/Provider/Consumer傳參的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09react中antd Upload手動(dòng)上傳的示例
本文主要介紹了react中antd Upload手動(dòng)上傳的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04如何在 React 中調(diào)用多個(gè) onClick 函數(shù)
這篇文章主要介紹了如何在React中調(diào)用多個(gè)onClick函數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11React通過(guò)redux-persist持久化數(shù)據(jù)存儲(chǔ)的方法示例
這篇文章主要介紹了React通過(guò)redux-persist持久化數(shù)據(jù)存儲(chǔ)的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02React翻頁(yè)器的實(shí)現(xiàn)(包含前后端)
本文主要介紹了React翻頁(yè)器的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08TypeScript在React項(xiàng)目中的使用實(shí)踐總結(jié)
這篇文章主要介紹了TypeScript在React項(xiàng)目中的使用總結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04