按照官方文档的例子已经多scroll-view进行了说明，但是案例中没有样式 到时会出现一些问题，比如说，自己写的scroll-x并不能横向滚动，今天就来说一下这个问题：
DEMO如下：
html:
<view class='section'>
<view class='section_title'>verticle scroll</view>
<scroll-view scroll-y style='height:200px;' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id='green' class='scroll-view-item bc_green'></view>
<view id='red' class='scroll-view-item bc_red'></view>
<view id='yellow' class='scroll-view-item bc_yellow'></view>
<view id='blue' class='scroll-view-item bc_blue'></view>
</scroll-view> <view class='btn-area'>
<button size='mini' bindtap="tap">click me to scroll into view</button>
<button size="mini" bindtap='tapMove'>click me to scroll</button>
</view>
</view>
<view class="section section_gap">
<view class="section__title">horizontal scroll</view>
<scroll-view scroll-x='true' class="scroll-view_H" style="width: 100%;">
<view id="green" class="scroll-view-item_H bc_green"></view>
<view id="red" class="scroll-view-item_H bc_red"></view>
<view id="yellow" class="scroll-view-item_H bc_yellow"></view>
<view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
</view>
js：
var order = ['red','yellow','blue','green','red']
Page({ /**
* 页面的初始数据
*/
data: {
toView:'red',
scrollTop:100
},
upper:function(e){
console.log('upper',e);
},
lower:function(e){
console.log('lower',e);
},
scroll:function(e){
console.log(e);
},
tap:function(e){
for(var i =0;i<order.length;i++){
if(order[i] === this.data.toView){
this.setData({
toView:order[i+1]
})
break;
}
}
},
tapMove:function(e){
this.setData({
scrollTop:this.data.scrollTop + 10
})
}
})
css:
/* pages/scrollView/scrollView.wxss */
.bc_green{
background-color: green;
}
.bc_red{
background-color: red;
}
.bc_yellow{
background-color: yellow;
}
.bc_blue{
background-color: blue;
}
.scroll-view-item{
width: 300px;
height: 100px;
}
.scroll-view-item_H{
width: 50%;
height: 220rpx;
display: inline-block;
text-align: center;
margin: 0 auto;
}
.scroll-view_H{
width: 100%;
overflow: hidden;
white-space: nowrap;
height: 220rpx;
}
重点：
.scroll-view-item_H{
width: 50%;
height: rpx;
display: inline-block;
text-align: center;
margin: auto;
}
.scroll-view_H{
width: 100%;
overflow: hidden;
white-space: nowrap;
height: rpx;
}
同时如果给横向滚动中的元素设置了display:flex或者float-left这些横向滚动都不会生效。请小伙伴们注意啦！