Codaland 斜杠国度

Code changes everything. Easier than you think.

【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>
posted @ 2020-04-04 15:50  Codaland-斜杠国度  阅读(391)  评论(0)    收藏  举报