使用

<swiperChoose :list='list' :name.sync="data.event"></swiperChoose>

组件代码

/**
* @Author: 858834013@qq.com
* @Name: swiperChoose
* @Date: 2022-05-14
* @Desc: swiper同步选择
*/
<template>
	<view style="height: 250upx;">
		<swiper style="height: 330upx;" indicator-dots="true" indicator-active-color="red">
			<swiper-item v-for="(item,index) in newList">
				<view class="lbtk_gyf_main_classification">
					<view class="lbtk_gyf_main_classification_nav" @click="bgclick(v.name)" v-for="(v,i) in item"
						:style="v.name===name?'background:#dfbbbf':''">
						<text>{{v.name}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {},
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			name: {
				type: String,
				default () {
					return ''
				}
			}
		},
		computed: {
			newList: function() {
				var data = this.list;
				var arr = [],
					mun = Math.ceil(data.length / 4)
				for (let i = 0; i < mun; i++) {
					let isarr = []
					for (var j = 0; j < 4; j++) {
						if (!data[(i * 4) + j]) {
							break;
						}
						isarr.push(data[(i * 4) + j])
					}
					arr.push(isarr)
				}
				return arr
			}
		},
		methods: {
			bgclick(e) {
				this.$emit("update:name", e)
			},
		}
	}
</script>

<style scoped lang="scss">
	.lbtk_gyf_main_classification {
		width: 626upx;
		margin: 0 auto;
		padding-top: 56upx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.lbtk_gyf_main_classification_nav {
		width: 290upx;
		line-height: 90upx;
		height: 90upx;
		background-color: #f9f0f1;
		border-radius: 12upx;
		border-radius: 35upx;
		text-align: center;
	}

	.lbtk_gyf_main_classification_nav:nth-of-type(1) {
		margin-bottom: 24upx;
	}

	.lbtk_gyf_main_classification_nav:nth-of-type(2) {
		margin-bottom: 24upx;
	}

	.lbtk_gyf_main_classification_nav:nth-of-type(3) {
		margin-bottom: 24upx;
	}

	.lbtk_gyf_main_classification_nav:nth-of-type(4) {
		margin-bottom: 24upx;
	}

	.lbtk_gyf_main_classification_nav text {
		color: #6f401e;
		font-size: 40upx;
		font-family: "宋体";
		display: inline-block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.lbtk_gyf_main_classification input {
		width: 100%;
		line-height: 71upx;
		font-size: 42upx;
	}

	.lbtk_gyf_main_classification_nav:nth-of-type(5) {
		margin-bottom: 40upx;
	}

	.lbtk_gyf_main_classification_nav:nth-of-type(6) {
		margin-bottom: 40upx;
	}

	.lbtk_gyf_main_classification_nav:nth-of-type(7) {
		margin-bottom: 40upx;
	}

	.lbtk_gyf_main_classification_nav:nth-of-type(8) {
		margin-bottom: 40upx;
	}
</style>