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 相关文章推荐
js异常捕获方法介绍
Apr 10 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
详解在vue-cli中使用路由
Sep 25 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
js实现日历
Nov 07 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
php密码生成类实例
2014/09/24 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
详解Python中的分支和循环结构
2020/02/11 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
精伦电子Java笔试题
2013/01/16 面试题
个人合作协议书范本
2014/04/18 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript