快捷導(dǎo)航

react實現(xiàn)移動端下拉菜單的示例代碼

更新時間：2020年01月16日 14:55:19 作者：米亞流年

這篇文章主要介紹了react實現(xiàn)移動端下拉菜單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

項目中要實現(xiàn)類似與vant的DropdownMenu:下拉菜單。看了vans 的效果其實也沒什么難度，于是動手魯了一個這樣的組件。
項目的技術(shù)棧為react全家桶+material UI + ant Design mobile。

vans的效果

我自己實現(xiàn)的效果

思路

常規(guī)做法獲取dom元素，動態(tài)修改選中dom的innerHtml。
當然這種方式不是react推薦的

我的做法既然react不推薦直接操作dom元素，那可以采用動態(tài)動態(tài)修改class的方式達到效果，例如：

let cls ="normal"
div未被選中時
<div className={cls}/> 
div被選中時
cls+=" current"
<div className ={cls}>

實現(xiàn)步驟

頂部tab采用三個div的方式布局，由于需要動態(tài)修改tab上的標題，所以定義一個數(shù)組，reducer中的tab數(shù)據(jù)結(jié)構(gòu)如下

let tabs = {};
tabs[TABKAY.AREA] = {
key: TABKAY.AREA,
text: "全部區(qū)域",
obj: {}
};
tabs[TABKAY.SORT] = {
key: TABKAY.SORT,
text: "綜合排序",
obj: {}
};
tabs[TABKAY.FILTER] = {
key: TABKAY.FILTER,
text: "篩選",
obj: SX
};
const initialState = {
areas: [{ id: "", name: "全部區(qū)域" }],
tabs: tabs,
actionKey: TABKAY.AREA,// 標識了當前選中tab
closePanel: true // 標識panel div 是否顯示
};

tabUI組件的頁面容器渲染方法

renderTabs() {
const { tabs, actionKey, closePanel } = this.props;
//---------
if (!closePanel) {
 fixedBody();
} else {
 looseBody();
}
//---------

let aray = [];
for (let key in tabs) {
 let item = tabs[key];
 let cls = item.key + " item";
 if (item.key === actionKey && !closePanel) {
  cls += " current";
 }

 aray.push(
  <div className={cls} key={item.key} onClick={() => this.onChangeTab(item.key)}>
   {item.text}
  </div>);
}

return aray;
}

樣式：這里邊有個技巧，就是利用了css元素選擇器的偽類的方式巧妙實現(xiàn)了箭頭以及箭頭的旋轉(zhuǎn)動畫

.item {
flex: 1;
font-size: 15px;
border-right: 0.5px solid #eaeaea;
text-align: center;

&:last-child {
 border: none;
}

&.AREA:after, &.SORT:after, &.FILTER:after {
 content: "";
 display: inline-block;
 width: 5px;
 height: 5px;
 margin-bottom: 2px;
 margin-left: 6px;
 border: 2px solid #666;
 border-width: 0 2px 2px 0;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -webkit-transition: .3s;
 transition: .3s;
}

&.current {
 color: #0084ff;
}

&.current:after {
 border-color: #0084ff;
 transform: rotate(225deg);
 -webkit-transform: rotate(225deg);
}

chrome 查看元素

全部區(qū)域tab被選中：

綜合tab被選中

每次點擊不同的tab時都會自動的渲染current這個css樣式，這樣就實現(xiàn)了下拉菜單的功能。

完整代碼

/**
 * Class:
 * Author: miyaliunian
 * Date: 2019/5/26
 * Description: tabs 選擇器
 * 醫(yī)院列表
 */
import React, { Component } from "react";
import { ZHPX, TABKAY } from "@api/Constant";
//Util
import { fixedBody, looseBody } from "@utils/fixRollingPenetration";
//Redux
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { actions as tabActions, getTabs, getAreasList, getActionKey, getClosePanel } from "@reduxs/modules/tabs";
import { actions as hospitalActions,} from "@reduxs/modules/hospital";

//樣式
import "./tabs.less";

class Tabs extends Component {
 
 /**
  * 變化當前點擊的item狀態(tài) 同時filter 請求
  * @param filterItem 當前選中的元素
  * @param key  哪個tab是選中狀態(tài)
  */
 changeDoFilter(filterItem, key, event) {
  const { tabActions: { changeFilter }, hospitalActions:{filterHosiContentList} } = this.props;
  event.stopPropagation();
  changeFilter(filterItem, key, (filter) => {
   filterHosiContentList(filter);
  });
 }

 /**
  * 篩選tab確定按鈕
  * @param event
  */
 filterPanel(event) {
  const {tabActions:{closePanelAction}, tabs,hospitalActions:{filterHosiContentList}} = this.props;
  event.stopPropagation();
  closePanelAction(()=>{
   filterHosiContentList(tabs)
  })
 }

 /**
  * 點擊切換Tab
  * @param key
  */
 onChangeTab(key) {
  const { actionKey,tabActions: { changeTab } } = this.props;
  let closePanel = false;
  //如果前后點擊的是同一個tab 就關(guān)閉panel
  if (actionKey === key && !this.props.closePanel) {
   closePanel = true;
  }
  closePanel ? looseBody() : fixedBody();
  changeTab(key, closePanel);
 }

 /**
  * 渲染頂部tab
  */
 renderTabs() {
  const { tabs, actionKey, closePanel } = this.props;
  //---------
  if (!closePanel) {
   fixedBody();
  } else {
   looseBody();
  }
  //---------

  let aray = [];
  for (let key in tabs) {
   let item = tabs[key];
   let cls = item.key + " item";
   if (item.key === actionKey && !closePanel) {
    cls += " current";
   }

   aray.push(
    <div className={cls} key={item.key} onClick={() => this.onChangeTab(item.key)}>
     {item.text}
    </div>);
  }

  return aray;
 }

 /**
  * 全部區(qū)域
  * @returns {*}
  */
 renderAreaContent() {
  const { areasList } = this.props;
  return areasList.map((item, index) => {
   let cls = item.active + " area-item";
   return (
    <li key={index} className={"area-item"} onClick={(e) => this.changeDoFilter(item, TABKAY.AREA, e)}>
     {item.name}
    </li>
   );
  });
 }


 /**
  * 全部排序
  * @returns {any[]}
  */
 renderSORTContent() {
  let sortList = ZHPX;
  return sortList.map((item, index) => {
   let cls = item.action ? "type-item active" : "type-item";

   return (
    <li key={index} className={cls} onClick={(e) => this.changeDoFilter(item, TABKAY.SORT, e)}>
     {item.name}
    </li>
   );
  });
 }


 /**
  * 篩選
  * @returns {*}
  */

 renderFilterInnerContent(items/*filterList*/) {
  return items.map((item, index) => {
   let cls = "cate-box";
   if (item.active) {
    cls += " active";
   }

   return (
    <div key={index} className={cls} onClick={(e) => this.changeDoFilter(item, TABKAY.FILTER, e)}>
     {item.name}
    </div>
   );
  });

 }

 renderFILTERContent() {
  let filterList = [];
  const { tabs } = this.props;
  filterList = tabs[TABKAY.FILTER].obj;
  return filterList.map((item, index) => {
   return (
    <li key={index} className={"filter-item"}>
     <p className={"filter-title"}>{index == 0 ? `醫(yī)院類型: ${item.groupTitle}` : `醫(yī)院等級: ${item.groupTitle}`}</p>
     <div className={"item-content"}>
      {this.renderFilterInnerContent(item.items, filterList)}
     </div>
    </li>
   );
  });
 }

 /**
  * 渲染過濾面板
  */
 renderContent() {
  const { tabs, actionKey } = this.props;
  let array = [];
  for (let key in tabs) {
   let item = tabs[key];
   let cls = item.key + "-panel";
   if (item.key === actionKey) {
    cls += " current";
   }

   // 全部區(qū)域
   if (item.key === TABKAY.AREA) {
    array.push(
     <ul key={item.key} className={cls}>
      {this.renderAreaContent()}
     </ul>
    );
   } else if (item.key === TABKAY.SORT) {
    // 綜合排序
    array.push(
     <ul key={item.key} className={cls}>
      {this.renderSORTContent()}
     </ul>
    );
   } else if (item.key === TABKAY.FILTER) {
    // 篩選
    array.push(
     <ul key={item.key} className={cls}>
      {this.renderFILTERContent()}
      <div className={"filterBtn"} onClick={(e) => this.filterPanel(e)}>
       確定
      </div>
     </ul>
    );
   }

  }
  return array;
 }


 render() {
  const { closePanel, tabActions: { closePanelAction } } = this.props;
  let cls = "panel";
  if (!closePanel) {
   cls += " show";
  } else {
   cls = "panel";
  }
  return (
   <div className={"tab-header"}>
    <div className={"tab-header-top border-bottom"}>
     {this.renderTabs()}
    </div>
    <div className={cls} onClick={() => closePanelAction(()=>{})}>
     <div className={"panel-inner"}>
      {this.renderContent()}
     </div>
    </div>
   </div>
  );
 }


 componentDidMount() {
  const { areasList, tabActions: { loadAreas } } = this.props;
  if (areasList && areasList.length !== 1) {
   return;
  }
  loadAreas();
 }
}

const mapStateToProps = state => {
 return {
  areasList: getAreasList(state),
  tabs: getTabs(state),
  actionKey: getActionKey(state),
  closePanel: getClosePanel(state)
 };
};

const mapDispatchToProps = dispatch => {
 return {
  tabActions: bindActionCreators(tabActions, dispatch),
  hospitalActions: bindActionCreators(hospitalActions, dispatch)
 };
};

export default connect(mapStateToProps, mapDispatchToProps)(Tabs);

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: