微信小程序scroll-view横向滚动和纵向滚动实现（亲测管用）

微信小程序横向滚动

//wxml
			<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" 
			scroll-into-view="{{rightId}}" >
	 		<view    style="display: inline-block">1</view>
	 		<view     style="display: inline-block">2</view>
	 		<view     style="display: inline-block">3</view>
	 		<view    style="display: inline-block">4</view>
	 		<view   id="select_title"  style="display: inline-block">5</view>
</scroll-view>
//wxss
#select_title{
	color: #F2A669;
}

1. scroll-x=“true” style=" white-space: nowrap; display: flex" 开启横向滚动必须设置的
2. scroll-into-view="{{rightId}}" 设置滚动到那个元素的 参数接收一个id名
3. id=“select_title” id名
   4.子元素必须设置 style=“display: inline-block”

//js
data:{
	rightId:null
	},
	//页面加载时
	onLoad：function(){
this.setData({
			rightId: 'select_title',
		})
}
		

微信小程序纵向滚动

//wxml
			  <scroll-view scroll-y   scroll-into-view="{{scrollTopName}}" >
	 		<view>1</view>
	 		<view>2</view>
	 		<view>3</view>
	 		<view>4</view>
	 		<view   id="scrollTabTop"  >5</view>
	 		</scroll-view>
//wxss
#scrollTabTop{
height:100vh;
  background-color: #F6F6F6;
}

1.必须设置高度

//js
data:{
	scrollTopName:null
	},
	//页面加载时
	onLoad：function(){
this.setData({
			scrollTopName: 'scrollTabTop',
		})
}