TianHeJianKang/pages/index/components/GuiRen.vue

<template>
	<view>
			<swiper class="swiper-box" @change="change" :current="current" indicator-dots 
			:indicator-active-color="zsq"
			circular>
				<swiper-item v-for="(item, index) in 4" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
					</view>
				</swiper-item>
			</swiper>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		HTTP
	} from '@/api/http.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		jieqiFn
	} from '@/config' //返回节气样式（a,b),a是节气名称，b是类型，1是返回背景颜色，2是返回边框颜色，3是返回字体颜色

	const current=ref(0)//当前滑块所在的index
	const zsq=ref('#fff')//指示器颜色
	const change=e=>{//切换滑块
		console.log(e,"changechange")
	}
</script>

<style lang="scss" scoped>
.swiper-box{
	background: red;
}
</style>