一个爱撸猫、爱追番、头发旺盛的前端小哥哥(●'◡'●)

scroll-view 小程序横向滚动

下面是官方给出的例子,但是没有写 css ,要想实现横向滚动还得改一下css样式

<scroll-view class=”scroll-view_H” scroll-x=”true” bindscroll=”scroll” style=”width: 100%”>
<view id=”demo1″ class=”scroll-view-item_H demo-text-1″></view>
<view id=”demo2″ class=”scroll-view-item_H demo-text-2″></view>
<view id=”demo3″ class=”scroll-view-item_H demo-text-3″></view>
</scroll-view>

要给父元素设置white-space: nowrap; 使其禁止换行;

子元素设置 display: inline-block; 使其在一行显示。

即:

.scroll-view_H {
    width: 100%;
    white-space: nowrap
}

.scroll-view-item_H {
    width: 30rpx;
    display: inline-block;
}

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据