小程序 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*****************

 

转载于:https://www.cnblogs.com/sansgun/p/9324219.html