CSS实现轮播嵌套

167 阅读1分钟

前言

产品中有用到Hybrid技术,目前使用Vant+Vue实现H5的模块开发功能,可以看 DSBridge在项目中实现跨平台交互这篇写的关于我们产品中混合开发的实现思路。

由于自己是主攻原生开发,H5的话也只是堪堪入了个门,本文的也仅仅是记录开发中遇到的问题,以及解决方案。

实现效果

QQ20220105-173142-HD.gif

实现代码

CSS:
  /* 横向滚动 */
    .lateral-sliding {
        display: flex;
        overflow-y: hidden;
        overflow-x: scroll;
   }
    .lateral-sliding-item {
        display: flex;
        margin-right: 1px;
    }
    .lateral-sliding::-webkit-scrollbar {
        display: none;
    }
    
HTML:

    <div class="lateral-sliding">  // 外层
        <div class="lateral-sliding-item"> // 内层
        </div>
    </div>

yysy,比原生少写不知道多少代码量😂。