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