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的一些小应用收集
Mar 27 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
原生js实现日期联动
Jan 12 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 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木马webshell扫描器代码
2012/01/25 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
js控制table合并具体实现
2014/02/20 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python多进程重复加载的解决方式
2019/12/13 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Python实现对adb命令封装
2020/03/06 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
python中get和post有什么区别
2020/06/19 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
高一物理教学反思
2014/01/24 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
管理建议书范文
2014/05/13 职场文书
经营目标责任书
2015/05/08 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
学习党史心得体会2016
2016/01/23 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python