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

冷不防 2022-12-05 00:49 102阅读 0赞

先截个图

![20200908145107492.png][]

上面是三个菜单，底下是进行切换的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>

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

### 分解 ###

1.获取高度问题

查看高度部分不懂的这里可以看[ uni-app获取元素高度等信息，并设置元素top信息][uni-app_top]也包含官网信息。

2.swiperTab

这个方法是swiper切换的操作

这边获取swiper的索引来定位它的那个节点  e.detail.current

因为我这里使用currentIndex来对图内的绿色的导航条的位置控制。

在顶部菜单点击哪个时，通过 current 来达到对swiper的控制，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

总体达到的效果是点击菜单，swiper进度某一项，滑动swiper，上部绿色底框滑动到对应位置。

还处理了每个swiper-item高度不同的问题。

如果有遗漏的部分欢迎留言！！！

[20200908145107492.png]: /images/20221123/092aafd88f85419eae9504c5a77f7c28.png
[uni-app_top]: https://blog.csdn.net/a18792627168/article/details/107519506
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221123/03dae5445fda4b87b812da4e53649293.png