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 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 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
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
Python的Urllib库的基本使用教程
2015/04/30 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
财务副总经理工作职责
2013/11/25 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
迟到检讨书300字
2014/02/14 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
什么是Python装饰器?如何定义和使用?
2022/04/11 Python