微信小程序10：WXML 组件- 轮播图 swiper

微信小程序10：WXML 组件- 轮播图 swiper

官网地址https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

示例代码

index.mxml

<view class="indexContainer">
  <!-- 轮播图区域 autoplay:自动滚动，interval:滚动间隔时间,其他看下面属性表 -->
  <swiper class="banners" indicator-dots indicator-color='ivory' 
  autoplay
  interval="3000"
  indicator-active-color='#d43c33'>

  <!-- 可以用wx:for=""来循环显示轮播项 -->

    <!-- 1 网络图片 -->
    <swiper-item>
      <image src="https://pic1.zhimg.com/80/v2-4a06bc2eb6d6772565b36506e9913bc3_1440w.jpg"></image>
    </swiper-item>
    <!--2 网络图片  -->
    <swiper-item>
      <image src="https://pic3.zhimg.com/80/v2-3338fc3072f5fdb0007ac264a0850d9f_1440w.jpg"></image>
    </swiper-item>
    <!-- 3 本地图片 -->
    <swiper-item>
      <image src="/static/images/v2.jpg"></image>
    </swiper-item>

  </swiper>
</view>

index.wxss

/* pages/index/index.wxss */
.banners {
  width: 100%;
  height: 400rpx;

}

.banners image {
  width: 100%;
  height: 100%;
}

结果

几个重要的属性

更多属性请看官方文档

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000（ms）	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向

---

静态文件说明

为了方便管理静态文件，例如图片，iconfont 图标，其他的静态css文件等等，。我们一般建立一个staic文件夹。

右键新建文件夹放在静态资源static（图片）

文件夹目录

在wxml文件使用图片地址是

<image src="/static/images/v2.jpg"></image>