【WeChat 小程序】006 - 使用swiper组件实现幻灯片轮播

swiper元素-滑动容器

1. 代码格式(wxml)

<swiper style="background: #eee; height: 520rpx;">
    <swiper-item>
    ...
    </swiper-item>

    <swiper-item>
    ...
    </swiper-item>

    <swiper-item>
    ...
    </swiper-item>
</swiper>

2. 样式优化

  • 开启页面提示小圆点
<swiper indicator-dots="{{true}}">

</swiper>
  • 提供相邻页的预览
    通过设置previous-marginnext-margin属性
    示例代码:
<swiper previous-margin="50rpx" next-margin="50rpx">

</swiper>
  • 设置默认幻灯片页
    通过设置current属性
<swiper current="0"> </swiper>

【WeChat 小程序】006 - 使用swiper组件实现幻灯片轮播

上一篇:计算日期间隔小程序


下一篇:【WeChat 小程序】007 - 按钮设置以及页面的生命周期函数