api里只说明了纵向滑动的关键:设置scroll-view
的高度,代码如下:
wxml
<scroll-view scroll-y class='ver'>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
</scroll-view>
wxss
.ver {
height: 300rpx;
}
但如果需要横向滑动,如法炮制就不行了。
关键需要将子元素横向排列:
wxml
<scroll-view scroll-x>
<view class='hor'>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
<view>11111</view>
</view>
</scroll-view>
如果是循环,还需要包裹一层block
或者view
:
<scroll-view scroll-x>
<view class='hor'>
<block wx:for='{{items}}'>
<view>{{item.title}}</view>
</block>
</view>
</scroll-view>
wxss
.hor {
display: flex;
flex-direction: row;
width: 600rpx;
}