React实现类似淘宝tab居中切换效果的示例代码

 更新时间:2020年06月02日 09:38:10   作者:浅夏晴空  
这篇文章主要介绍了React实现类似淘宝tab居中切换效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

效果

01-帖子列表 

DOM布局

const label = {
 lettersort: false,
 paramname: "label",
 paramid: 0,
 title: "车源列表筛选项",
 option: [{
   value: 1,
   text: "全部"
  },
  {
   value: 2,
   text: "本地求购"
  },
  {
   value: 3,
   text: "精准收车"
  },
  {
   value: 4,
   text: "全国收车"
  },
  {
   value: 5,
   text: "同行询价"
  },
  {
   value: 6,
   text: "可批可售"
  },
  {
   value: 7,
   text: "车抵贷款"
  },
  {
   value: 8,
   text: "消费贷款"
  },
  {
   value: 9,
   text: "商家库容"
  },
  {
   value: 10,
   text: "代理合作"
  },
  {
   value: 11,
   text: "过户转籍"
  },
  {
   value: 12,
   text: "寻车拖车"
  },
  {
   value: 13,
   text: "解压抵押"
  },
  {
   value: 14,
   text: "抵押核验"
  }
 ]
}
filterDom = () => {
  let filterJson = label;
  let arr = filterJson.option;
  return (
    <div ref="filterBar" className="filter-list">
      {arr.map((item, index) => {
        if (item.value == this.state.filterSelect) {
          return (
            <div
              ref={item.value}
              className="filter-item active"
              key={index}
              value={item.value}>
              {item.text}
              <div className="zhishi"></div>
            </div>
          );
        } else {
          return (
            <div
              className="filter-item"
              onClick={() => {
                this.filterBarClick(item);
              }}
              ref={item.value}
              key={index}
              value={item.value}>
              {item.text}
            </div>
          );
        }
      })}
    </div>
  );
};
render(){
 return(
  <div>
   ...
   <div className="filter-content" style={{ display: this.state.filterBarShow }}>
     {this.filterDom()}
     <div className="shadow"></div>
     {/* 按钮和占位 */}
     <div
       className="filte-btn-content"
       onClick={() => {
         this.filterBtnClick();
       }}>
       <div className="filte-btn"></div>
     </div>
   </div>
   ...
  </div>
 )
}

scss样式表

.filter {
 width: 100%;
 // position: fixed;
}
.filter-content {
  overflow: hidden;
  padding-right: pxToRem(27px);
  position: relative;
  background: #fff;
  .filter-list {
    display: flex;
    overflow-x: auto;
    justify-content: space-between;
    height: pxToRem(90px);
    color: #333333;
    align-items: center;
    -webkit-overflow-scrolling: touch;
    font-size: pxToRem(32px);
    font-family:PingFangSC-Light,PingFang SC;
    font-weight:300;
    background: #fff;
    margin-right: pxToRem(100px);
    .filter-item {
      text-align: center;
      display: flex;
      // flex-basis: 17px;
      flex-shrink: 0;
      white-space: nowrap;
      padding: 0 pxToRem(25px);
      background: #fff;
      height: pxToRem(90px);
      align-items: center;
      justify-content: center;
    }
    .active{
      font-size: pxToRem(36px);
      font-weight: 600;
      height: pxToRem(90px);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex: 1;
      flex-direction: column;
    }
    .zhishi{
      background: url("./../img/zhishi.png");
      background-repeat: no-repeat;
      background-size: 100%;
      width: pxToRem(25px);
      height: pxToRem(6px);
      position: absolute;
      bottom: pxToRem(10px);;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 999;
    }
  }
  
  .shadow{
    height: pxToRem(90px);
    width: pxToRem(133px);
    position: absolute;
    right: pxToRem(101px);
    top: 0;
    background:linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.14) 100%);
    pointer-events: none;
  }
  .filte-btn{
    background: url("./../img/shaixuan.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: pxToRem(40px);
    height: pxToRem(40px);
  }
  .filte-btn-content {
    height: pxToRem(90px);
    position: absolute;
    right: pxToRem(27px);
    top: 0;
    background: #fff;
    width: pxToRem(74px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

实现

想要居中展示首先是需要找到中心点,然后在点击是计算偏移量,把对应的标签滚动到中心位置

filterBarClick = param => {
    const { value, text } = param;
    this.setState({
      filterSelect: value
    });
    let dom = this.refs;
    //获取点击时当前标签的DOM
    let valDom = dom[value];
    //获取标签父元素DOM
    let contentDom = dom.filterBar;
    //计算当前标签到最左侧的宽度
    let valLeft = valDom.offsetLeft;
    //计算当前标签本身的宽度
    let valWidth = valDom.clientWidth;
    //当前标签中心点到最左侧的距离
    let valCenter = valLeft + valWidth / 2;
    //可视屏幕宽度
    let clientWidth = document.querySelector('body').offsetWidth;
    //可视屏幕中心点(减去的30是列表两边的15像素的留白)
    let center = (clientWidth - 30) / 2;
    //计算当前标签中心点和屏幕中心点的偏移量 然后滚动相应的距离
    if (valCenter > center) {
      contentDom.scrollTo({
        left: valCenter - center,
        behavior: 'smooth'
      });
    } else {
      contentDom.scrollTo({
        left: 0,
        behavior: 'smooth'
      });
    }
  };

总结

到此这篇关于React实现类似淘宝tab居中切换效果的文章就介绍到这了,更多相关react tab居中切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 手把手教您实现react异步加载高阶组件

    手把手教您实现react异步加载高阶组件

    这篇文章主要介绍了手把手教您实现react异步加载高阶组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 使用react-router4.0实现重定向和404功能的方法

    使用react-router4.0实现重定向和404功能的方法

    本篇文章主要介绍了使用react-router4.0实现重定向和404功能的方法,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • React生命周期原理与用法踩坑笔记

    React生命周期原理与用法踩坑笔记

    这篇文章主要介绍了React生命周期原理与用法,结合实例形式总结分析了react生命周期原理、用法及相关注意事项,需要的朋友可以参考下
    2020-04-04
  • React + webpack 环境配置的方法步骤

    React + webpack 环境配置的方法步骤

    本篇文章主要介绍了React + webpack 环境配置的方法步骤,详解的介绍了开发环境的配置搭建,有兴趣的可以了解一下
    2017-09-09
  • React-router v4 路由配置方法小结

    React-router v4 路由配置方法小结

    本篇文章主要介绍了React-router v4 路由配置方法小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React Hook的使用示例

    React Hook的使用示例

    这篇文章主要介绍了React Hook的使用示例,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • react项目如何运行在微信公众号

    react项目如何运行在微信公众号

    这篇文章主要介绍了react项目如何运行在微信公众号,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下
    2021-04-04
  • React中使用async validator进行表单验证的实例代码

    React中使用async validator进行表单验证的实例代码

    react上进行表单验证是很繁琐的,在这里使用async-validator处理起来就变的很方便了,接下来通过本文给大家介绍React中使用async validator进行表单验证的方法,需要的朋友可以参考下
    2018-08-08
  • 老生常谈js-react组件生命周期

    老生常谈js-react组件生命周期

    下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • React中Portals与错误边界处理实现

    React中Portals与错误边界处理实现

    本文主要介绍了React中Portals与错误边界处理实现,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07

最新评论