首页

pages/index/components/swiper.vue

@@ -0,0 +1,64 @@
+<template>
+	<view class="viewswiper">
+		<u-swiper :list="list1" @change="e => current = e.current" indicatorStyle="right: 20px" height='484'>
+			<view slot="indicator" class="indicator">
+				<view class="indicator__dot" v-for="(item, index) in list1" :key="index"
+					:class="[index === current && 'indicator__dot--active']"
+					:style="[index === current && {'width':16+'px'}]">
+				</view>
+			</view>
+		</u-swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				current: 0,
+				list1: [
+					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+				]
+			};
+		},
+	};
+</script>
+
+<style scoped lang="scss">
+	.viewswiper {
+		.indicator {
+			margin-bottom: 46rpx;
+			@include flex(row);
+			justify-content: center;
+
+			&__dot {
+				height: 6px;
+				width: 6px;
+				border-radius: 100px;
+				background-color: rgba(255, 255, 255, 0.35);
+				margin: 0 5px;
+				transition: background-color 0.3s;
+
+				&--active {
+					background-color: #ffffff;
+				}
+			}
+		}
+
+		.indicator-num {
+			padding: 2px 0;
+			background-color: rgba(0, 0, 0, 0.35);
+			border-radius: 100px;
+			width: 35px;
+			@include flex;
+			justify-content: center;
+
+			&__text {
+				color: #FFFFFF;
+				font-size: 12px;
+			}
+		}
+	}
+</style>