codaland

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>

分类:

技术点:

相关文章:

  • 2021-12-05
  • 2022-12-23
  • 2021-09-10
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-28
  • 2022-12-23
猜你喜欢
  • 2021-06-17
  • 2021-06-28
  • 2021-06-20
  • 2021-07-17
  • 2022-12-23
  • 2021-04-27
  • 2022-12-23
相关资源
相似解决方案