快捷導(dǎo)航

Header組件熱門搜索欄的實現(xiàn)示例

更新時間：2023年04月27日 16:12:23 作者：JoernLee

這篇文章主要為大家介紹了Header組件熱門搜索欄的實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1. 基本布局

本次任務(wù)是實現(xiàn)熱門搜索模塊的布局和展示控制功能。

1.1 熱門搜索框

在布局過程中，我們發(fā)現(xiàn)熱門搜索框并沒有出現(xiàn)。這可能是由于外部組件存在 overflow: hidden 屬性導(dǎo)致的，因此我們需要給一個高度解決這個問題：

cssCopy code
export const SearchInfo = styled.div`
  position: absolute;
  left: 0;
  top: 56px;
  width: 240px;
  height: 100px;
  padding: 0 20px;
  background: green;
`;

接下來，我們通過簡書官網(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;
`;

然后需要實現(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;
`;

但是此時發(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;
`;

同時，我們將上面 SearchInfo 寫死的高度去掉。

2. 控制展示

官方文檔描述了 SearchInfo 區(qū)域應(yīng)該在鼠標(biāo)聚焦時顯示，失去焦點時隱藏。我們可以通過控制 SearchInfo 區(qū)域來實現(xiàn)這個邏輯，而且這個控制邏輯與之前用于控制動畫的控制參數(shù)非常相似。

3. 使用 Ajax 請求獲取 Tag 數(shù)據(jù)

實際上，熱門 Tag 的數(shù)據(jù)是從服務(wù)器獲取的。我們希望通過 Ajax 來獲取這些數(shù)據(jù)，就像簡書網(wǎng)站一樣。而且我們只需要在第一次聚焦時獲取數(shù)據(jù)，然后進(jìn)行本地緩存。

此時，我們需要將 header 中的列表內(nèi)容進(jìn)行存儲，以便后續(xù)進(jìn)行狀態(tài)管理。初始時，它是一個空數(shù)組。

3.1 使用 redux-thunk 返回函數(shù)

當(dāng) Nav 聚焦時，我們需要獲取 Ajax 數(shù)據(jù)。由于這是一個異步操作，所以需要使用第三方庫。我們統(tǒng)一使用 redux-thunk 進(jìn)行操作，將異步操作放在 action 中處理。

應(yīng)該在創(chuàng)建 store 時使用 redux-thunk：

接下來，我們需要派發(fā)異步 action：

然后創(chuàng)建這個 Action：

如果需要使用 Ajax，則需要使用第三方庫 axios 來實現(xiàn)異步請求：

import axios from 'axios';
export const getList = () => { return (dispatch) => { // 異步請求 axios.get('/api/headerList.json').then(()=>{
    }).catch(()=>{
        console.log('error');
    });
}
};

當(dāng)后端數(shù)據(jù)還未開發(fā)完成時，我們可以使用前端制作的假數(shù)據(jù)。我們可以使用 create-react-app 的特性，在 public 和 src 目錄下創(chuàng)建一個對應(yīng)的 JSON 文件，然后就可以訪問了。在此期間，路由也需要進(jìn)行修改，以便實現(xiàn)假數(shù)據(jù)。

然后，我們需要修改 state。我們需要在回調(diào)中派發(fā)一個新的 action：

const changeList = (data) => ({ type: constants.CHANGE_LIST, data });
export const getList = () => { return (dispatch) => { // 異步請求 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。但是有一點需要注意：我們使用 fromJS() 方法將 list 變成了一個 Immutable 數(shù)組。但是，當(dāng)我們調(diào)用 state.set() 方法去改變 list 時，action.data 本身是一個普通的數(shù)組，這兩種數(shù)據(jù)類型不同會出現(xiàn)錯誤。因此，我們需要將 data 轉(zhuǎn)換為 Immutable：

然后，我們可以按如下方式編寫 reducer：

3.3 使用 map 方法循環(huán)展示內(nèi)容

最后，需要將數(shù)據(jù)展示出來。可以使用 map 方法來遍歷數(shù)組，并渲染列表項：

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 語句，可以通過使用 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組件熱門搜索欄的實現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于Header組件熱門搜索欄的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: