zoukankan      html  css  js  c++  java
  • 不用轮子自己写滑动块

    我们要做的时移动端的滑动块组件,像这样

    http://www.jq22.com/jquery-info16045

    tab组件一般是一行显示的,如果数量太多怎么办

    我们可以把多余的tab项隐藏,左右滑动查看

    可滚动的水平导航
    div.scroll{
    display: flex;align-items:center;
    justify-content:flex-start;
    overflow-x: scroll; white-space: nowrap;
    }

    隐藏滚动条
    div.scroll::-webkit-scrollbar{0;height:0}

    滑块组件也可以作为图文组件

    <div class="scroll2">
                  <div class="jptj">
                    <div>1元</div>
                    <div>10模块</div>
                    <div>1元</div>
                    <div>10模块</div>
                    <div>1元</div>
                    <div>10模块</div>
    
                  </div>
                </div>
    .jptj {
        display: flex;
        flex-flow: nowrap;
    
    }
    .jptj>div {
        margin:10px;
        width:165px;
        height:80px;
        background-color: #eee;
        padding:0 auto;
    }
    div.scroll2{
      display: flex;align-items:center;
      justify-content:flex-start;
      overflow-x: scroll; white-space: nowrap;
    }

  • 相关阅读:
    Jq操作表格
    最新web 2.0 配色 (一)
    Jqtable edit
    Jq公告渐隐弹出
    Jq模拟最大化最小化关闭
    JqtoggleClass
    Jq弹出公告
    jquery左右拉效果
    最新web 2.0 配色 (二)
    ZenCoding各个工具安装
  • 原文地址:https://www.cnblogs.com/Unknw/p/8709005.html
Copyright © 2011-2022 走看看