<template>
<view>
<h2 style="text-align: center;font-size: 16px;background-color: #000000;color: #fff;">竖向滚动</h2>
<div class="navs">
<span @click="scrollTop='nav1'">水果饮品</span>
<span @click="scrollTop='nav2'">早点小吃</span>
<span @click="scrollTop='nav3'">中式炒菜</span>
</div>
<scroll-view
scroll-y
scroll-with-animation
:scroll-into-view="scrollTop" style="height: 300px;">
<div class="content">
<h2 id="nav1" class="categoryItem">水果饮品</h2>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<h2 id="nav2" class="categoryItem">早点小吃</h2>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<h2 id="nav3" class="categoryItem">中式炒菜</h2>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐222</div>
</div>
</scroll-view>
<br>
<h2 style="text-align: center;font-size: 16px;background-color: #000000;color: #fff;">横向滚动</h2>
<div class="navs">
<span @click="scrollLeft='nav11'">水果饮品</span>
<span @click="scrollLeft='nav22'">早点小吃</span>
<span @click="scrollLeft='nav33'">中式炒菜</span>
</div>
<scroll-view
scroll-x
scroll-with-animation
:scroll-into-view="scrollLeft" style="width: 100%;">
<div class="content2 clearfix">
<h2 id="nav11" class="categoryItem">水果饮品</h2>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<h2 id="nav22" class="categoryItem">早点小吃</h2>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<h2 id="nav33" class="categoryItem">中式炒菜</h2>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐</div>
<div class="categoryItem">热点推荐222</div>
</div>
</scroll-view>
</view>
</template>
data(){
return{
scrollTop:'nav1',
scrollLeft:'nav11'
}
},
.categoryItem{
height: 80upx;
line-height: 80upx;
background-color: antiquewhite
}
.content2{
width: 2000px;
overflow: auto;
.categoryItem{
float: left;
padding-right: 30px;
}
}
注意:scroll-view 下面最近的元素(例上面的.content)不要同时设置overflow样式和height