微信小程序——scroll-view组件之scroll-x、scroll-y

scroll-view组件

功能描述

        可滚动视图区域，详细介绍请参考官方文档【视图容器 scroll-view】

通用属性

这里只介绍scroll-x、scroll-y两个属性，用以记录学习中遇到的问题，后期有新的属性问题再进一步补充。

scroll-x 允许横向滚动

使用scroll-x时注意：

1、在子元素<view>的样式中增加display: inline-block，display: inline-block就是​不独占一行​的​块级元素,让多个块元素在一行显示；scroll-x这里不能使用display: flex；

2、scroll-view 要增加样式：white-space:nowrap，意思就是空格不换行。

3、scroll-view宽需要固定。

WXML代码，如下：

<scroll-view class="container1" scroll-x>
  <view> A</view>
  <view> B</view>
  <view> C</view>
</scroll-view>

WXSS代码，如下：

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  flex: 0 0 50%;
/*display: inline-block就是​不独占一行​的​块级元素,让多个块元素在一行显示；scroll-x这里不能使用display: flex*/
  display: inline-block;

}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}

.container1 view:nth-child(2) {
  background-color: lightblue;
}

.container1 view:nth-child(3) {
  background-color: lightpink;
}

.container1 {
  border: 1px solid red;
  width: 120px;
  height: 100px;
/*white-space:nowrap的意思就是空格不换行,scroll-x这里时增加此属性，才可实现特效*/
  white-space: nowrap;
}

效果图：

scroll-y 允许纵向滚动

使用scroll-y时注意：scroll-view宽需要固定。

WXML代码，如下：

<scroll-view class="container1" scroll-y>
  <view> A</view>
  <view> B</view>
  <view> C</view>
</scroll-view>

WXSS代码，如下：

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;

}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}

.container1 view:nth-child(2) {
  background-color: lightblue;
}

.container1 view:nth-child(3) {
  background-color: lightpink;
}

.container1 {
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

效果展示：