微信小程序横向滚动
//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; }
- scroll-x=“true” style=" white-space: nowrap; display: flex" 开启横向滚动必须设置的
- scroll-into-view="{{rightId}}" 设置滚动到那个元素的 参数接收一个id名
- 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', }) }