重构-标题栏(超过一定距离居中、可手势切换)

旧城等待， 2021-07-24 18:42 286阅读 0赞

动画:
    	标题栏居中移动
    	标题下的提示栏移动且宽度随标题大小改变
    	内容区域移动
    
    实现:
    	标题栏居中移动:
    		move:记录标题容器的移动距离,因为只要标题栏移动,move一定是<0的;
    		(1)获取到标题栏所有标题总宽度、标题栏容器宽度、将某个标题移动到中心的距离
    			中心距离:标题栏容器宽度/2-选中的标题宽度/2
    			
    		(2)点击标题,进行是否居中判断
    			(1)点击标题,获取标题到左边可视视口距离,与中心距离进行判断
    				1、因为标题栏是移动的,所以获取的距离并不是左边可视视口距离标题的距离,将标题距离容器左边的距离-已经移动的距离(距离为正数),即可
    				2、将获取到的可视距离与中心距离判断
    					如果大于:说明标题在中心距离后,需要左移标题栏修正
    					修正距离:-（可视距离-中心距离)
    					修改移动距离:move+修正距离
    					
    		(3)边界处理
    			如果move>0;即击点首部前几个,标签栏移动到最初始状态,即move=0;
    			如果|move|>|向左可移动的最大距离|,即点击尾部几个,标签栏移动到最大距离处,即move=向左可移动的最大距离
    				左边可移动最大距离:标签的总长度-标签容器的长度
    		
    		(4)手势等处理
    			使用useEffect监听索引的变化做相应的处理即可
    			
    参数:
    	  onChange:PropTypes.func,          切换回调,第一个参数为索引,第二个参数为标题名称
    	  swiper: PropTypes.bool,			是否可手势滑动
    	  hoverColor: PropTypes.string,     hover标签字体颜色
    	  activeColor: PropTypes.string,    选中标签字体颜色
    	  activeBarColor: PropTypes.string, 标签的提示线颜色
    	  padding: PropTypes.string,        标签的左右padding
    	  height: PropTypes.string,         标签的高度
    	  fontSize: PropTypes.string,       标签的字体大小
    	  activeBarHeight: PropTypes.string,  标签提示线的高度

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][20201226165126162.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 3]代码示例:  
使用:

import React,{ useState} from 'react'
    import Tabs from './tabs/tabs'
    import TabItem from './tabs/tabItem/tabItem'
    
    function App(){ 
    
      const _tabChange = function (index, name) { 
        console.log(index);
        console.log(name);
      }
    
      return(
    
        <div
          style={ {  height: '100%', width: '100%' }}
        >
          <Tabs
            onChange={ _tabChange}
            swiper
            /*...参数*/
          >
            <TabItem label='标签一'>哇啦啦</TabItem>
            <TabItem label='标签二'>哇咔咔</TabItem>
            <TabItem label='标签三'>哇啦啦</TabItem>
            <TabItem label='标签四四'>哇咔咔</TabItem>
            <TabItem label='标签五'>哇啦啦</TabItem>
            <TabItem label='标签六'>哇咔咔</TabItem>
            <TabItem label='标签七'>哇啦啦</TabItem>
            <TabItem label='标签八八'>哇咔咔</TabItem>
            <TabItem label='标签九'>哇啦啦</TabItem>
            <TabItem label='标签十'>哇咔咔</TabItem>
            <TabItem label='标签三'>哇啦啦</TabItem>
            <TabItem label='标签四四'>哇咔咔</TabItem>
            <TabItem label='标签一'>哇啦啦</TabItem>
            <TabItem label='标签二'>哇咔咔</TabItem>
            <TabItem label='标签三'>哇啦啦</TabItem>
          </Tabs>
        </div>
      )
    }
    
    export default App

tabs.jsx:

import React, {  useState,useCallback,useRef,useEffect,useMemo } from 'react'
    import PropTypes from 'prop-types'
    import TabItem from './tabItem/tabItem'
    import './tabs.css'
    
    function App(props){ 
    
      
      const [currt, setCurrt] = useState(0); //当前标签索引
      const [startX, setStartX] = useState(0); //内容区域鼠标按下时获取的坐标
      const [sliding, setSliding] = useState(false); //内容区域是否可滑动
      const [sliderWidth, setSliderWidth] = useState(0); //内容区域的宽度
      const [labelListLen, setLabelListLen] = useState(0); //所有label的总长度
      const [labelContainerLen, setLabelContainerLen] = useState(0);  //label容器的宽度,即页面能够显示的宽度
      const [maxMove, setMaxMove] = useState(0); //最大移动距离
      const [lastX, setLastX] = useState(0); //记录每次移动边界值,使得每次手势移动都从最左边边界开始
      const [labels, setLabels] = useState([]); //每个label标签的宽度
      let [move, setMove] = useState(0);
    
      const tabf = useRef(null);  //总容器
      const boxf = useRef(null);  //内容容器
      const labelf = useRef(null); //标签容器
      const barf = useRef(null);  //提示线
      
      //样式处理
      useEffect(() => { 
        
        _styleHandler('hoverColor');
        _styleHandler('activeColor');
        _styleHandler('activeBarColor');
        _styleHandler('padding');
        _styleHandler('height');
        _styleHandler('activeBarHeight');
        _styleHandler('fontSize');
        
      }, [])
    
      // 统一样式处理
      const _styleHandler = useCallback((key) => { 
        props[key] && tabf.current.style.setProperty('--' + key, props[key])
        
      }, [])
    
      //获取标签的所有宽度,以及内容容器的宽度
      useEffect(() => { 
        let arr = [];
        let doms = Array.from(labelf.current.children);
        doms.forEach((item, index) => { 
          if (index == 0) { 
            barf.current.style.width=item.offsetWidth+'px'
          }
          arr.push(item.offsetWidth);
        })
        //去掉最后一个提示器节点,只保留标签节点
        arr.splice(arr.length - 1, 1);
        setLabels([...arr]);
    
        let len = arr.reduce((pre, item) => {  return pre + item }, 0); //获取所有label的总长度
        setLabelListLen(len);
        setLabelContainerLen(labelf.current.offsetWidth)
        setMaxMove(len - labelf.current.offsetWidth);
        setSliderWidth(boxf.current.offsetWidth);
        //给标签添加style属性,后续能够style.获取
        labelf.current.style.left = 0;
      }, [])
      
      //监听提示栏和内容滑动
      useEffect(() => { 
        barf.current.style.width = labels[currt] + 'px'; //提示线的宽度,随标签宽度改变
        barf.current.style.left = _getMoveWidth + 'px'; //提示线的位置,当前标签栏的位置
        boxf.current.style.left = `-${ sliderWidth * currt}px`; //内容区域的位置
        setLastX(-sliderWidth * currt) //设置边界值,使得下次首次移动从最左边开始
        props.onChange(currt,props.children[currt].props.label)
      }, [currt])
    
    
      //监听内容手势滑动
      useEffect(() => { 
        if (!props.swiper) { 
          return;
        }
        let len = 0;
    
        const _onmousemove=function (e) { 
          if (sliding) { 
            
            len = e.clientX - startX;
            boxf.current.style.transition = '.2s'
            boxf.current.style.left = lastX + len + 'px';
          }
        }
    
        const _onmouseup = function (e) { 
          setSliding(false);
          boxf.current.style.transition = '.5s'
          
          //当左右边界移动时,最终反弹回边界
          if ((len <= 100 && len >= -100)||(len > 100&&currt == 0)||(len<-100&&currt == props.children.length-1))
          { 
            boxf.current.style.left = `${ lastX}px`;
            return;
          }
    
          if (len > 100) { 
            setCurrt(currt - 1);
            // 移动tab栏目,不能放在effect监听器中,因为第一次触发获取不到所有宽度
            _barMove(currt-1);
          }
          if (len < -100) { 
            setCurrt(currt + 1);
            _barMove(currt+1);
          }
    
          boxf.current.style.transition='.5s'
      
        }
        
        document.documentElement.addEventListener('mousemove', _onmousemove);
        document.documentElement.addEventListener('mouseup',_onmouseup)
        return () => { 
           document.documentElement.removeEventListener('mousemove', _onmousemove);
           document.documentElement.removeEventListener('mouseup',_onmouseup)
        }
      }, [startX, sliding])
      
    
    
      //内容mousedown,获取第一次位置
      const _mouseDown = useCallback((e) => { 
        setStartX(e.clientX);
        setSliding(true);
      },[])
    
      //点击标签,不能将_getMoveWidth放在这里,因为currt点击后会在下一次改变,状态不同步
      const _tabClick = useCallback(function (index, name) { 
        setCurrt(index);
        _barMove(index);
    
      }, [labels, currt])
      
      //标签栏移动
      //只要标签栏移动,则容器移动的距离move一定<0
      const _barMove = useCallback((index) => { 
        
        if (labelContainerLen >= labelListLen) {  //当标签的容器长度大于等于标签的总长度时,不需要移动标签栏
          return;
        }
    
        let half = (labelContainerLen - labels[index]) / 2; //获取某个标签居中时,距离左右的距离,即移动的距离为,容器的宽度/2-当前标签的宽度/2
        let offsetLeft = labelf.current.children[index].offsetLeft; //获取当前标签,距离容器最左边的距离,因为容器在移动,所以并不是距离左边视口边界的距离
    
        
        let tempMove = 0; //当前标签到中间需要移动的距离
        let absMove = Math.abs(move); //将标签栏容器已经移动的距离取正,便于获取当前标签距离容器最左边的距离-容器已经移动距离=相对于左边视口的距离
    
        //距离居中修正判断
        //当前标签获取距离容器最左边的距离-容器已经移动的距离即距离左边可视窗口距离>当前标签移动到中间距离视口的距离
        //说明标签在中线外,需要向左移动标签栏
        if (offsetLeft-absMove > half) {  //标签栏向左,
         
          //需要向左修正的距离,距离左边可视视口的距离-到中线的距离
          tempMove = -(offsetLeft - absMove - half);
          move = move - Math.abs(tempMove); //修改容器已经移动的距离,在原有基础上-修正的距离
        } else {  //标签栏向右
          tempMove = half - (offsetLeft - absMove); //需要向右修正的距离,中线的距离-距离左边可视视口的距离
          move = move + Math.abs(tempMove); //修改容器已经移动的距离,在原有基础上+修正的距离
        }
    
        // 边界处理
        move > 0 && (move = 0); //当容器移动的距离大于0,即击点首前几个,标签栏移动到最初始状态
        move < (-maxMove) && (move = -maxMove); //当容器移动距离>可以移动的最大距离(标签的总长度-标签容器的长度),即点击末尾后几个,标签栏移动位置就在最大可移动位置
    
        setMove(move); //记录当前容器移动距离
        labelf.current.style.left = move + 'px';  //移动标签栏
    
      },[labelContainerLen,labels,move,maxMove])
      
      //计算标签的提示栏根据索引需要移动的距离
      const _getMoveWidth = useMemo(() => { 
        return labels.reduce((pre, item, index) => { 
          if (index < currt)
          { 
            return pre + item;
          } else { 
            return pre;  
          }
        }, 0)
      }, [labels, currt])
      
      //格式化px数据
      const _fixedValue = useCallback((val) => { 
        return parseInt(val.substring(0,val.length-2))
      },[])
    
      return(
    
        <div className='jf-tabs-container' ref={ tabf}>
          <div className='jf-tabs-label-container' ref={ labelf}>
            { 
              props.children.map((item, index)=>{ 
                return (
                  <div onClick={ (e) => {  _tabClick(index,item.props.label) }} className={ `jf-outer-tabItem-container ${ (currt==index)&&'jf-tabItem-active'}`} key={ item+index}>
                    <TabItem label={ item.props.label}></TabItem>
                  </div>
                )
              })
            }
            <div className='jf-tabs-bar' ref={ barf}></div>
          </div>
          <div className='jf-tabItem-box' ref={ boxf}>
            { 
              
              props.children.map((item, index)=>{ 
                return (
                  <div onMouseDown={ (e) => {  _mouseDown(e) }} className={ `jf-tabItem-boxItem `} key={ item+index} >
                  { item.props.children}
                  </div>
                )
              })
              
            }
          </div>    
        </div>
      )
    }
    
    export default React.memo(App);
    
    App.propTypes = { 
      swiper: PropTypes.bool,
      hoverColor: PropTypes.string,
      activeColor: PropTypes.string,
      activeBarColor: PropTypes.string,
      padding: PropTypes.string,
      height: PropTypes.string,
      fontSize: PropTypes.string,
      activeBarHeight: PropTypes.string,
    }
    
    App.defaultProps = { 
      onChange:()=>{ }
    }

tabs.css:

.jf-tabs-container { 
      display: inline-block;
      overflow: hidden;
      width: 100%;
      height: 100%;
    
      --hoverColor: #409eff;
      --activeColor: #409eff;
      --activeBarColor: red;
      --padding: 20px;
      --height: 40px;
      --activeBarHeight: 4px;
      --fontSize: 14px;
    }
    
    .jf-tabs-label-container { 
      /* overflow: hidden; */
      position: relative;
      width: 100%;
      left: 0px;
      transition: 0.5s;
    
      white-space: nowrap;
      position: relative;
    }
    
    .jf-outer-tabItem-container { 
      box-sizing: border-box;
      padding: 0 var(--padding);
      height: var(--height);
      box-sizing: border-box;
      line-height: var(--height);
      display: inline-block;
      list-style: none;
      font-size: var(--fontSize);
      font-weight: 500;
      /* position: relative; */
      cursor: pointer;
    }
    .jf-outer-tabItem-container:hover { 
      color: var(--hoverColor);
    }
    .jf-tabItem-active { 
      color: var(--activeColor);
    }
    
    .jf-tabs-bar { 
      position: absolute;
      height: var(--activeBarHeight);
      bottom: 0;
      left: 0;
      transition: 0.5s;
      background-color: var(--activeBarColor);
    }
    
    .jf-tabItem-box { 
      width: 100%;
      height: 100%;
      white-space: nowrap;
      position: relative;
      transition: left 0.5s;
      left: 0px;
    
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    .jf-tabItem-boxItem { 
      width: 100%;
      height: 100%;
      display: inline-block;
    }

tabs/tabItem.jsx:

import React, {  useState } from 'react'
    import PropTypes from 'prop-types'
    import './tabItem.css'
    
    function App(props){ 
    
      return(
    
        <div className='jf-tabItem-container'>
          <span>{ props.label }</span>
        </div>
      )
    }
    
    export default React.memo(App);

tabs/tabItem.css:

.jf-tabItem-container { 
      box-sizing: border-box;
      height: 40px;
      box-sizing: border-box;
      line-height: 40px;
      display: inline-block;
      list-style: none;
      font-weight: 500;
      position: relative;
      cursor: pointer;
    
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    .jf-tabItem-container:hover { 
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201226165055661.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201226165115630.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[20201226165126162.png]: https://img-blog.csdnimg.cn/20201226165126162.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201226165138205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 3]: /images/20210724/2f4f7edcf3fc47cf9206c1e6edb5afb3.png