Header組件熱門搜索欄的實(shí)現(xiàn)示例
1. 基本布局
本次任務(wù)是實(shí)現(xiàn)熱門搜索模塊的布局和展示控制功能。
1.1 熱門搜索框
在布局過程中，我們發(fā)現(xiàn)熱門搜索框并沒有出現(xiàn)。這可能是由于外部組件存在 overflow: hidden 屬性導(dǎo)致的，因此我們需要給一個(gè)高度解決這個(gè)問題：
cssCopy code export const SearchInfo = styled.div` position: absolute; left: 0; top: 56px; width: 240px; height: 100px; padding: 0 20px; background: green; `;
接下來，我們通過簡(jiǎn)書官網(wǎng)調(diào)試的方法補(bǔ)全其他屬性。
1.2 熱門搜索Title和換一換圖標(biāo)
接下來，我們需要添加熱門搜索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)高度出了問題了，因此我們需要在外層布局進(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í)隱藏。我們可以通過控制 SearchInfo 區(qū)域來實(shí)現(xiàn)這個(gè)邏輯，而且這個(gè)控制邏輯與之前用于控制動(dòng)畫的控制參數(shù)非常相似。
3. 使用 Ajax 請(qǐng)求獲取 Tag 數(shù)據(jù)
實(shí)際上，熱門 Tag 的數(shù)據(jù)是從服務(wù)器獲取的。我們希望通過 Ajax 來獲取這些數(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：
接下來，我們需要派發(fā)異步 action：
然后創(chuàng)建這個(gè) Action：
如果需要使用 Ajax，則需要使用第三方庫(kù) axios 來實(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ù)還未開發(fā)完成時(shí)，我們可以使用前端制作的假數(shù)據(jù)。我們可以使用 create-react-app 的特性，在 public 和 src 目錄下創(chuàng)建一個(gè)對(duì)應(yīng)的 JSON 文件，然后就可以訪問了。在此期間，路由也需要進(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)一更新
接下來，我們需要在 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ù)展示出來?？梢允褂?map 方法來遍歷數(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ǔ)句，可以通過使用 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)文章！
相關(guān)文章
解決配置setupProxy.js代理,頁(yè)面報(bào)錯(cuò)404問題
這篇文章主要介紹了解決配置setupProxy.js代理,頁(yè)面報(bào)錯(cuò)404問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
使用React手寫一個(gè)對(duì)話框或模態(tài)框的方法示例
這篇文章主要介紹了使用React手寫一個(gè)對(duì)話框或模態(tài)框的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
react-native android狀態(tài)欄的實(shí)現(xiàn)
這篇文章主要介紹了react-native android狀態(tài)欄的實(shí)現(xiàn)，使?fàn)顟B(tài)欄顏色與App顏色一致，使用戶界面更加整體。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
在?React?項(xiàng)目中全量使用?Hooks的方法
這篇文章主要介紹了在?React?項(xiàng)目中全量使用?Hooks,使用 Hooks 能為開發(fā)提升不少效率，但并不代表就要拋棄 Class Component，依舊還有很多場(chǎng)景我們還得用到它，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
react-native中ListView組件點(diǎn)擊跳轉(zhuǎn)的方法示例
ListView作為React Native的核心組件,用于高效地顯示一個(gè)可以垂直滾動(dòng)的變化的數(shù)據(jù)列表。下面這篇文章主要給大家介紹了關(guān)于react-native中ListView組件點(diǎn)擊跳轉(zhuǎn)的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實(shí)現(xiàn)。下面就說說這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧2023-01-01
React組件分為函數(shù)組件與class組件；函數(shù)組件是無(wú)狀態(tài)組件，class稱為類組件；函數(shù)組件只有props，沒有自己的私有數(shù)據(jù)和生命周期函數(shù)；class組件有自己私有數(shù)據(jù)(this.state) 和 生命周期函數(shù)2022-09-09
這篇文章主要介紹了React?hooks組件通信,在開發(fā)中組件通信是React中的一個(gè)重要的知識(shí)點(diǎn)，本文通過實(shí)例代碼給大家講解react hooks中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了React Diff原理的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
這篇文章主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-09-09