- scroll-x横向滑动
- scroll-y纵向滑动
1.scroll-x允许横向滑动,首先在list-wxml中加入下列代码
<scroll-view class="container1" scroll-x>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
<!--scroll-y 允许纵向滚动
scroll-x 允许横向滚动-->
打开list-wxss,加入下列代码
.container1 view {
display: inline-block;
// 设置 display 属性为 inline-block,这会使元素以内联块级元素的方式显示,可以在同一行内显示多个元素
height: 100px;
text-align: center;
width: 100px;
}
.container1 view:nth-child(1) {
background-color: cornflowerblue;
}
.container1 view:nth-child(2) {
background-color: lightblue;
}
.container1 view:nth-child(3) {
background-color: lightcoral;
}
.container1 {
border: 1px solid red;
height: 100px;
width: 120px;
white-space: nowrap;
// 设置 white-space 属性为 nowrap,这会导致文本不换行,适合横向滚动的布局
/* display: flex;
justify-content: space-around;
第一次
*/
}
2.scroll-y 允许纵向滑动,在list-wxml中加入下列代码
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
<!--scroll-y 允许纵向滚动
scroll-x 允许横向滚动-->
在list-wxss中加入下列代码:
.container1 view {
height: 100px;
width: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1) {
background-color: cornflowerblue;
}
.container1 view:nth-child(2) {
background-color: lightblue;
}
.container1 view:nth-child(3) {
background-color: lightcoral;
}
.container1 {
border: 1px solid red;
height: 120px;
width: 100px;
/* display: flex;
justify-content: space-around;
第一次
*/
}
成果展示: