|
作者：王梵，来自原文地址
横向滑动，如下
/*wxml*/
<view>
<scroll-view class="demo-view-1" scroll-x="true">
<view class="bc_green bc_size inline"></view>
<view class="bc_red bc_size inline"></view>
<view class="bc_blue bc_size inline"></view>
<view class="bc_pink bc_size inline"></view>
<view class="bc_yellow bc_size inline"></view>
<view class="bc_gray bc_size inline"></view>
<view class="bc_tan bc_size inline"></view>
</scroll-view>
</view>
/*wxss*/
.demo-view-1{
white-space: nowrap;
height: 300rpx;
}
.bc_green{
background-color: #00ff00;
}
.bc_red{
background-color: #ff0000;
}
.bc_blue{
background-color: #0000ff;
}
.bc_pink{
background-color: pink;
}
.bc_yellow{
background-color: yellow;
}
.bc_gray{
background-color: gray;
}
.bc_tan{
background-color: tan;
}
.inline{
display: inline-block;
}
.bc_size{
width: 300rpx;
height: 300rpx;
}
运行效果如下
scroll-view标签上需要注意的属性，如下
|
属性名 |
说明 |
位置 |
备注 |
|
scroll-x |
水平方向滑动时必须设置为true |
scroll-view标签 |
只能在wxml中设置 |
|
white-space |
必须设置为nowrap |
scroll-view标签 |
可以在wxss中设置 |
|
display |
必须设置为inline-block |
scroll-view的子组件上 |
可以在wxss中设置 |
display:inline-block，这对键值只需要在scroll-view的子组件上设置就可以了，scroll-view上不需要设置display属性，默认值即可。
竖直方向滑动，如下
/*wxml*/
<view>
<scroll-view class="demo-view-2" scroll-y="true">
<view class="bc_green bc_size"></view>
<view class="bc_red bc_size"></view>
<view class="bc_blue bc_size"></view>
<view class="bc_pink bc_size"></view>
<view class=
|
