uni-app swpier组件学习

swiper：

滑块视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

indicator-dots

是否显示面板指示点；默认false。

indicator-color

指示点颜色。默认：rgba(0, 0, 0, .3)；半透明：rgba(255, 255, 255, .3)

indicator-active-color

当前选中的指示点颜色。默认：#000000；白色：#ffffff

autoplay

是否自动切换。默认：false

interval

自动切换时长。默认：5000

vertical

滑动方向是否为纵向。

<template>
	<view>
		<swiper indicator-dots indicator-color="rgba(255, 255, 255, .3)" 
		indicator-active-color="#ffffff" circular="true" 
		autoplay="true" interval="1000">
		<swiper-item>111</swiper-item>
		<swiper-item>222</swiper-item>
		<swiper-item>333</swiper-item>
			
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>



<style lang="scss">
	swiper{
		width: 100vw;//全屏宽度；50vh:屏幕高度一半
		height: 200px;
		border: 1px solid green;
	}
	
	swiper-item{
		width: 100%;
		height: 100%;
		background: pink;
	}//滑动子模块，此时子模块的颜色是一样的，如果要实现每个模块的颜色不一样，则需要控制器
	
	swiper-item:nth-last-child(2n){
		background:orange;
	}//比例选择器，2的倍数的子模块是橘色
	
</style>