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

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

示例代码

index.mxml

<view class="indexContainer"><!-- 轮播图区域 autoplay:自动滚动，interval:滚动间隔时间,其他看下面属性表 --><swiper class="banners" indicator-dots indicator-color='ivory' autoplayinterval="3000"indicator-active-color='#d43c33'><!-- 可以用wx:for=""来循环显示轮播项 --><!-- 1 网络图片 --><swiper-item><image src="/80/v2-4a06bc2eb6d6772565b36506e9913bc3_1440w.jpg"></image></swiper-item><!--2 网络图片 --><swiper-item><image src="/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%;}

结果

几个重要的属性

更多属性请看官方文档

静态文件说明

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

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

文件夹目录

在wxml文件使用图片地址是

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