我们要做的时移动端的滑动块组件,像这样
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; }