uni-app视图

轮播加标题滑动

<template>
	<view class="info">
		<view class="header">
			<view :class="headelcli==index?'header_items':'header_item' " v-for="(item,index) in title" :key="index"
				@click="handelcli(item.id)">
				{{item.title}}
			</view>
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :current="current" :indicator-dots="false" :autoplay="false"   @change="swiperChange"
			 >
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				current:0,
				title: [{
						title: '通知公告',
						id: 0
					},
					{
						title: '项目简报',
						id: 1
					}, {
						title: '政策文件',
						id: 2
					},
				],
				headelcli: 0
			}
		},
		methods: {
			swiperChange(e){
				console.log(e.detail.current);
				this.headelcli=e.detail.current
			},
			handelcli(i) {
				this.headelcli = i
				this.current=i
			}
		}
	}
</script>
<style scoped lang="less">
	.info {
		.header {
			display: flex;
			width: 100vw;
			padding: 20rpx;

			.header_item {
				width: 32%;
				text-align: center;
			}

			.header_items {
				width: 32%;
				text-align: center;
				color: #249CF2;
			}

			.header_items:not(:nth-last-of-type(1)) {
				border-right: 2px solid #D8D8D8;
			}

			.header_item:not(:nth-last-of-type(1)) {
				border-right: 2px solid #D8D8D8;
			}
		}

	}
</style>