react实现移动端下拉菜单的示例代码


Posted in Javascript onJanuary 16, 2020

前言

项目中要实现类似与vant的DropdownMenu:下拉菜单。看了vans 的效果 其实也没什么难度,于是动手鲁了一个这样的组件。
项目的技术栈为react全家桶+material UI + ant Design mobile。

vans的效果

react实现移动端下拉菜单的示例代码

我自己实现的效果

思路

常规做法获取dom元素,动态修改选中dom的innerHtml。
当然这种方式不是react推荐的

我的做法既然react不推荐直接操作dom元素,那可以采用动态动态修改class的方式达到效果,例如:

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

实现步骤

顶部tab采用三个div的方式布局,由于需要动态修改tab上的标题,所以定义一个数组,reducer中的tab数据结构如下

let tabs = {};
tabs[TABKAY.AREA] = {
key: TABKAY.AREA,
text: "全部区域",
obj: {}
};
tabs[TABKAY.SORT] = {
key: TABKAY.SORT,
text: "综合排序",
obj: {}
};
tabs[TABKAY.FILTER] = {
key: TABKAY.FILTER,
text: "筛选",
obj: SX
};
const initialState = {
areas: [{ id: "", name: "全部区域" }],
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元素选择器的伪类的方式巧妙实现了箭头以及箭头的旋转动画

.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 查看元素

全部区域tab被选中:

react实现移动端下拉菜单的示例代码

综合tab被选中

react实现移动端下拉菜单的示例代码

每次点击不同的tab时 都会自动的渲染current这个css样式,这样就实现了下拉菜单的功能。

完整代码

/**
 * Class:
 * Author: miyaliunian
 * Date: 2019/5/26
 * Description: tabs 选择器
 * 医院列表
 */
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状态 同时filter 请求
  * @param filterItem 当前选中的元素
  * @param key  哪个tab是选中状态
  */
 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 就关闭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;
 }

 /**
  * 全部区域
  * @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 ? `医院类型: ${item.groupTitle}` : `医院等级: ${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";
   }

   // 全部区域
   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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
js读写json文件实例代码
Oct 21 Javascript
js与applet相互调用的方法
Jun 22 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 #Javascript
JS实现简单的表格增删
Jan 16 #Javascript
JS实现基本的网页计算器功能示例
Jan 16 #Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 #Javascript
js实现简单的秒表
Jan 16 #Javascript
JS 数组基本用法入门示例解析
Jan 16 #Javascript
js实现上下左右键盘控制div移动
Jan 16 #Javascript
You might like
php 中英文语言转换类
2011/09/07 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
Python实现高效求解素数代码实例
2015/06/30 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python延时操作实现方法示例
2018/08/14 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
详解用python生成随机数的几种方法
2019/08/04 Python
对python中return与yield的区别详解
2020/03/12 Python
python pip如何手动安装二进制包
2020/09/30 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
自荐信结尾
2013/10/27 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
红色电影观后感
2015/06/18 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
Java Spring读取和存储详细操作
2022/08/05 Java/Android