微信小程序横向滚动
//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',
})
}