微信小程序-scroll-view组件（有坑）

最新推荐文章于 2024-08-16 09:35:38 发布

Somnus陳

最新推荐文章于 2024-08-16 09:35:38 发布

阅读量4.4k

点赞数

分类专栏：微信小程序文章标签：微信小程序

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/DZRYWYBL/article/details/80033079

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

<!--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详解+案例！！！