微信小程序-scroll-view组件(有坑)

根据官方给的案例,我感到深深的无力感,设置横向滚动时怎么都滚动不了,其中的苦就不多说,直接说干货。各种参数去看开发文档吧。

<!--index.wxml-->
 <scroll-view class="vertical_scroll" scroll-y="true">
    <view  class="scroll-view-item_H_bc_green"></view>
    <view  class="scroll-view-item_H_bc_red"></view>
    <view  class="scroll-view-item_H_bc_yellow"></view>
    <view  class="scroll-view-item_H_bc_blue"></view>
</scroll-view>
<view style="height:10px"></view>
<!--white-space
normal  默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap  文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap  保留空白符序列,但是正常地进行换行。
pre-line  合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
-->
  <scroll-view scroll-x="true" style=" white-space: nowrap; height: 100px ; width: 200px" >
    <view  class="scroll-view-item_H_bc_green"   style="display:inline-block"></view>
    <view  class="scroll-view-item_H_bc_red"     style="display:inline-block"></view>
    <view  class="scroll-view-item_H_bc_yellow"  style="display:inline-block"></view>
    <view  class="scroll-view-item_H_bc_blue"    style="display:inline-block"></view>
  </scroll-view>

/**index.wxss**/  
  
.vertical_scroll{  

  width: 100px;  
  height: 200px;  
}  
.horizontal_scroll{  
  width: 200px;  
  height: 100px;  
  
}  
  
.scroll-view-item_H_bc_green{  
  width: 100px;  
  height: 100px;  
  background-color: green  
  
}  
.scroll-view-item_H_bc_red{  
  width: 100px;  
  height: 100px;  
  background-color: red  
  
}  
.scroll-view-item_H_bc_yellow{  
  width: 100px;  
  height: 100px;  
  background-color: yellow  
  
}  
.scroll-view-item_H_bc_blue{  
  width: 100px;  
  height: 100px;  
  background-color: blue  
}  

其中的坑呢,就是在横向显示的上面,display:inline-block,搞懂这个用法就可以了,参考我这边文章,通俗易懂。

block,inline和inline-block详解+案例!!!

33 Comments

Add a Comment

电子邮件地址不会被公开。