小程序 scroll-view横向滚动不起作用,该怎么解决?
问题描述:scroll-view设置scroll-x时,不起作用,子元素始终不会滚动。
方法
wxml:
1 <scroll-view class="scroll-box" scroll-x scroll-into-view="red" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> 2 <view id="green" class="scroll-item green"></view> 3 <view id="red" class="scroll-item red"></view> 4 <view id="blue" class="scroll-item blue"></view> 5 </scroll-view> 6 </view>
wxss:
1 .scroll-box{ 2 height:rpx(40); 3 width:100%; 4 /*overflow:hidden;*/ 5 white-space:nowrap;//重点 6 .scroll-item{ 7 display:inline-block;//重点 8 width:rpx(187.5); 9 height:rpx(40); 10 &.green{ 11 background: $green; 12 } 13 &.red{ 14 background: $red; 15 } 16 &.blue{ 17 background: $blue; 18 } 19 } 20 }
总结:
1、需给scroll-view内的子元素设置display:inline-block;设置浮动不起作用
2、scroll-view元素设置,white-wrap:nowrap
3、给scroll-view元素设置flex不起作用
如果从css角度来看,完全没必要使用scroll-view组件;不过当需要定制滚动事件,这时候可以通过绑定滚动事件、滚动到头尾处事件来自定义事件
***************本文通过编写sass,再编译为wxss*****************