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


Posted in Javascript onJune 02, 2020

效果

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

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居中切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 表格插件整理
Apr 27 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
js实现的折叠导航示例
Nov 29 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
Javascript基础之数组的使用
May 13 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
实例分析javascript中的异步
Jun 02 #Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 #Javascript
js简单实现自动生成表格功能示例
Jun 02 #Javascript
JS中准确判断变量类型的方法
Jun 01 #Javascript
Vuex中的Mutations的具体使用方法
Jun 01 #Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 #Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 #Javascript
You might like
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
python 爬取疫情数据的源码
2020/02/09 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
特色蛋糕店创业计划书
2014/01/28 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
高中军训感言400字
2014/02/24 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python