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;
}
效果展示: