布局:水平滚动,垂直滚动
垂直滚动:
.main {
position: absolute;
background: #f00;
left: 0;
right: 0;
top:.4rem;
bottom:.4rem;
overflow: hidden;
}
.list {
height: 5.86rem;
overflow-y: scroll;
//回弹
-webkit-overflow-scrolling: touch;
}
水平滚动:
html结构:
<div class="cate-view">
<ul class="cate-navs">
<li v-for="(item,index) in types" :key="index">
{{ item.typename }}
</li>
</ul>
</div>
css样式:
.cate-view {
position: absolute;
top:0px;
left: 0;
right: 0;
overflow: hidden;
}
.cate-navs {
white-space: nowrap;
overflow-x: scroll;
}
.cate-navs li {
display: inline-block;
......
}