小程序组件scroll-view的使用

<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