swiper 轮播容器

<view><!-- 轮播 -->
  <swiper vertical="{{false}}" indicator-dots="{{true}}" autoplay="{{true}}" interval="5000"> <!-- swiper为轮播容器 设置指示点开启 设置自动播放开启 设置轮播间隔为5000毫秒 -->
    <swiper-item><!-- swiper-item为swiper的子元素,同时也是容器,可以任何元素 -->
      <image src="/images/wx.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/vr.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/iqiyi.png"></image>
    </swiper-item>
  </swiper>
</view>

特别注意

错误写法

<swiper vertical="false" indicator-dots="true" autoplay="true" interval="5000"> <!-- swiper为轮播容器 设置指示点开启 设置自动播放开启 设置轮播间隔为5000毫秒 -->

注意vertical的值类型是string类型,也就是说除了字符串为空的情况下vertical才会为false,为了解决这个问题,我们把true和false用双括号包裹起来做数据绑定

正确写法

<swiper vertical="{{false}}" indicator-dots="{{true}}" autoplay="{{true}}" interval="5000"> <!-- swiper为轮播容器 设置指示点开启 设置自动播放开启 设置轮播间隔为5000毫秒 -->