微信小程序实现轮播图

 

目录

        效果展示

         轮播图详细代码

---

        效果展示

        一般在小程序中或多或少都会使用一些轮播图的样式，即美观便捷由很吸引使用者，当然在微信小程序中设置轮播图还是很容易的，接下来就让我们来试着做吧！

         轮播图详细代码

<!-- 首页轮播图 -->
<view class="swi_box">
  <swiper circular interval="2000" autoplay indicator-active-color="white"  indicator-color="yellow" indicator-dots>
    <swiper-item>
      <image src="/image/banner1.jpg" mode="widthFix"></image>
    </swiper-item>
    <swiper-item>
      <image src="/image/banner2.jpg" mode="widthFix"></image>
    </swiper-item>
    <swiper-item>
      <image src="/image/banner3.jpg" mode="widthFix"></image>
    </swiper-item>
  </swiper>
</view>

        案例中我填充的轮播内容是图片，也可以轮一些文本等，其中<swiper></seiper>标签是滑块视图容器。其中只可放置<swiper-item></swiper-item>组件，否则会导致未定义的行为。

        可以看到<swiper></seiper>标签中我添加了很多swiper属性，我来简单的跟大家解释一下

第一个circular属性：

表示设置是否采用衔接滑动，默认启动，比如此处是三张图片

未设定前轮播效果是:

      图1->图2->图3然后直接从图三倒似的快速跳到图一，然后按往返来轮播，非常突兀不流畅观

设定后的轮播效果是：

      图1->图2->图3->图1->图2->图3....一轮过后后是接着向原来方向按顺序顺下来，十分流畅

 第二个interval=""属性：

        表示轮播的事件间隔，单位是毫秒

第三个autoplay属性：

        设置是否自动切换，以达到轮播图的效果，默认开启，未添加是手动滑动。

第四个indicator-active-color=""属性：

        表示选中时底部部面板指示点的颜色。

第五个indicator-color=""属性：

        表示未选中时底部部面板指示点的颜色。

最后一个indicator-dots属性：

        表示是否开启底部部面板指示点。

这个轮播图的样式比较简单，所用到的属性比较基础通用，有兴趣的小伙伴可以点击->官网链接

进入官方文档探索更多更好的属性。