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 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
实例分析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那些琐碎的知识点(整理)
2017/05/20 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
JavaScript 比较时间大小的代码
2010/04/24 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
实习心得体会
2014/01/02 职场文书
韩国商务邀请函
2014/01/14 职场文书
护理专业自荐书
2014/06/04 职场文书
专科生就业求职信
2014/06/22 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
公司地址变更通知
2015/04/25 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL