uni-app的swiper组件切换且同时切换顶部菜单

最新推荐文章于 2025-07-26 14:53:39 发布

DOM曼珠沙华

最新推荐文章于 2025-07-26 14:53:39 发布

阅读量4.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： vue.js

本文链接：https://blog.csdn.net/a18792627168/article/details/108468626

uni-app 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在uni-app中实现动态调整swiper高度及与顶部菜单同步切换效果，解决swiper-item高度不一的问题，通过获取元素实际高度并动态设置样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先截个图

上面是三个菜单，底下是进行切换的swiper，根据swiper的切换，底下的可见的绿色也会随之动态移动。

具体加自己不会截动图且涉及保密，其他部分当然不想再做一次，所以没图，直接看代码吧【狗头保命】

上面的代码实现，具体是在uni-app内实现的

我这里存在两个问题，我这三个swiper-item都是请求的后端接口，所以这边的三个item高度是不一致的。第二个是在接口请求时使用了onLoad不展示，最后查了一下感觉没用，使用了onShow时查后端接口。

这里需要注意的是swiper的高度变化。

<template>
    <view class="main-page">
        <view class="page-section-spacing">
		<view class="header">
		    <view class="top-nav-item" @tap="currentIndex=0">
			菜单1
		    </view>
		    <view class="top-nav-item" @tap="currentIndex=1">
			菜单2
		    </view>
		    <view class="top-nav-item" @tap="currentIndex=2">
			菜单3
		    </view>
		</view>
		<view :style="{left: currentIndex*250 + 'rpx'}"  class="top-nav-child"></view>
                <swiper class="swiper" @change="swiperTab" :style="{height: listHeight + 10+'px'}" :current='currentIndex'>
                        <swiper-item>
                            <view class="container">
                                A
		            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item containersec">
                                B
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item containerthi">
                    	        C
                        </view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				show: 1,
				data: [],
				currentIndex: 0,
				listHeight: 600,
				detaildata: [],
				servicedata: []
			}
		},
		onShow() {
			// 初始化接口的位置
		},
		methods: {
			swiperTab(e) {
				this.currentIndex = e.detail.current; //获取索引
				console.log("this.currentIndex",this.currentIndex)
				
				const query = uni.createSelectorQuery().in(this);
				// 下面的用于获取item的高度（这里写三个的原因是高度不一致）
				if(e.detail.current == 0){
					query.select('.container').boundingClientRect(data => {
						this.listHeight = data.height
						console.log("this.listHeight",this.listHeight)
					}).exec();
				}
				if(e.detail.current == 1){
					query.select('.containersec').boundingClientRect(data => {
						this.listHeight = data.height
						console.log("this.listHeightsec",this.listHeight)
					}).exec();
				}
				if(e.detail.current == 2){
					query.select('.containerthi').boundingClientRect(data => {
						this.listHeight = data.height
						console.log("this.listHeightsec",this.listHeight)
					}).exec();
				}
			},
		},
	}
</script>

<style scoped lang="less">
	.main-page{
		font-size: 28rpx;
		.header{
			display: flex;
			justify-content: space-around;
			background-color: #FFFFFF;
			position: fixed;
			width: 100%;
			height: 80rpx;
			z-index: 999;
			border-bottom: 1px solid #BCBCBC;
		}
		.container, .containersec, .containerthi{
			padding: 100rpx 0 0 16rpx;
			.content{
				width: 690rpx;
				height: 180rpx;
				border-radius: 8rpx;
				box-shadow: 0 0 8rpx #C0C1CA;
				margin-bottom: 20rpx;
				padding-top: 30rpx;
				line-height: 50rpx;
				padding-left: 30rpx;
				text{
					color: #BCBCBC;
					text{
						color: #000000;
						margin-left: 20rpx;
					}
				}
				.saledate, .customno{
					margin-left: 40rpx;
				}
				.date, .protype{
					margin-left: 40rpx;
				}
			}
		}
	}
	.top-nav-item{
		width: 168upx;
		line-height: 82upx;
		text-align: center;
	}
	.top-nav-child{
		top: 80rpx;
		width: 250upx;
		background: #32B53F;
		height: 6upx;
		transition: all 0.5s;
		position: fixed;
	}
</style>

感觉这个换行有问题，导致有点乱了。