＜swiper＞滑块，＜image＞图片和＜navigator＞路由

1 <swiper-item>

1.1 swiper-item是swiper子元素，默认横向滑动。

<template>
	<view>
		<swiper>
			<swiper-item>1111</swiper-item>
			<swiper-item>222</swiper-item>
			<swiper-item>3333</swiper-item>
			<swiper-item>4444</swiper-item>
		</swiper>
	</view>
</template>

1.2 style样式，设置swiper-item默认为粉色，nth-child(2n)每隔一个下一个为橙色。

<style lang="scss">
swiper{
	width: 100vw;
	height: 200px;
	swiper-item{
		width: 100%;
		height: 100%;
		background: pink;
	}
	swiper-item:nth-child(2n){
		background: orange;
	}
}
</style>

1.3.vw和%类似都是设置页面大小。可以参考如图。

2 <swiper>的属性

 2.1 indicator-dots 是否显示面板指示点，默认为黑色，不选中为灰色。

颜色的3种表达式

颜色名称，如”red”、”green”、”blue”等

RGB值，如 “rgba(255,0,0)”

#符号后接4位的十六进制数值，如 “#ff0000” 、“#f00”

<swiper indicator-dots></swiper>

2.2 indicator-color 指示点颜色,可以根据自身需要设置指定颜色。

<swiper indicator-dots indicator-color="blue"></swiper>

2.3 indicator-active-color 当前选中的指示点颜色，也是根据自身需要设置指定颜色。

<swiper indicator-dots indicator-color="blue" indicator-active-color="#c00"></swiper>

2.4 circular 重新回到开头，当我们滑到最后一个的时候是不会滑动到第一个的。

<swiper indicator-dots indicator-color="rgba(255,255,255,0.3)" 
		indicator-active-color="#ffffff" circular>
</swiper>

2.5 autoplay 是否自动播放，默认是5秒切换下一个。可以设置interval 值为2000,2000是毫秒也就是2秒。这样每隔2秒切换一次。

<swiper indicator-dots indicator-color="rgba(255,255,255,0.3)" 
		indicator-active-color="#ffffff" circular autoplay interval="2000">
</swiper>

2.6 vertical 纵向滑动。因为我们设置swiper滑动它默认是横向滑动的。

<swiper indicator-dots indicator-color="rgba(255,255,255,0.3)" 
        indicator-active-color="#ffffff" circular autoplay interval="2000" vertical>
</swiper>

3<image>的属性

3.1

4<navigator>

4.1

5<button>

5.1