微信小程序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><viewstyle="display: inline-block">2</view><viewstyle="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;}

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

4.子元素必须设置 style=“display: inline-block”

//jsdata:{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.必须设置高度

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