小程序---横向轮播图

本文介绍了一种在小程序中实现横向滚动视图的方法,通过使用scroll-view组件并结合特定的样式设置,如display:flex和white-space:nowrap,来创建流畅的水平滚动效果。文章详细展示了如何设置scroll-view组件的属性以及在wxss中定义滚动项的样式。

按照官网API可能看不懂,那么就参照以下方法

<view class="section__title">vertical scroll</view>
<scroll-view
    scroll-x
    style="height: 200px;display:flex;white-space:nowrap"
    
    //添加display:flex;white-space:nowrap
    
  >
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red" class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>

然后在wxss里面设置样式的时候

.scroll-view-item{
  height: 200px;
  display: inline-block;
  width: 100%;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值