uniapp使用scroll-view与swiper制作顶部导航栏+内容切换

<template>
	<view class="container">
		<view>
			<scroll-view class="scroll-view_H" scroll-x @scroll="scroll" :scroll-left="sc_left">
				<view class="scroll-view-item_H" :class="{active:current===index}" v-for="(item,index) in scrollView" :key="index"
				 @click="changeIndex(index)">{{item}}</view>
			</scroll-view>
		</view>
		<view>
			<view class="uni-margin-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper :current="current" class="swiper" @change="change" @transition="transition" :style="'height:'+sw_height+'px'">
							<swiper-item v-for="(item,ind) in swiper" :key="ind">
								<view class="swiper-item">{{item}}</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				current: 0,
				scrollView: ["A", "B", "C", "D", "E", "F", "G"],
				swiper: ["A", "B", "C", "D", "E", "F", "G"],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
 
				// swiper宽
				sw_width: 0,
				// swiper高
				sw_height: 0,
				// swiper 距离左边距离
				sw_left: 0,
				// scrollView宽
				sc_width: 0,
				// scrollView 距离左边距离
				sc_left: 0
			}
		},
		onLoad() {
			let this_ = this;
			// 获取屏幕宽高
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
 
			this_.sw_width = windowWidth;
			this_.sw_height = windowHeight - 50;
 
			// 调用getElSize方法获取元素宽高
			setTimeout(() => {
				let data = this_.getElSize("scroll-view-item_H");
				console.log(data);
				this_.sc_width = data.right;
			}, 10)
 
		},
 
		methods: {
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			scrolltolower(e) {
				console.log(e)
			},
 
			change(e) {
				let this_ = this;
 
                //   const {
				//	 windowWidth,
				//   windowHeight
                //	 } = uni.getSystemInfoSync();
 
                //	 let width = windowWidth / 3;
				
				// 不能访问到data里面的数据   访问就出错    
				this_.current = e.detail.current;
				this_.sc_left = e.detail.current * 125;  // 这里因为访问不到data数据  
                // 本应该是 this_.sc_left = e.detail.current * this_.sc_width   
                解决办法可以重新在这里获取一次手机屏幕大小  然后用这个大小除去你上面滑块一屏看得到的个数，上面注释部分。 或参考uniapp本身例子中的tabbar  
                //  此例子只是我自己使用
 
                
			},
 
			transition(e) {
				// console.log(e);
 
			},
 
			changeIndex(index) {
				this.current = index
			},
 
			// 获取元素大小
			getElSize(class_) { //得到元素的size
				let data_ = [];
				const query = uni.createSelectorQuery().in(this);
				query.select(`.${class_}`).boundingClientRect(data => {
					data_ = data;
				}).exec();
				return data_
			},
		}
	}
</script>
 
<style lang='scss'>
	page {
		background: $page-color-base;
	}
 
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
 
		.scroll-view-item {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 36upx;
		}
 
		.scroll-view-item_H {
			display: inline-block;
			width: 33.33%;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 36upx;
			background: #333;
			color: #fff;
		}
	}
 
	.uni-margin-wrap {
		width: 100%;
		/* height: 600rpx; */
 
		.swiper {
			/* height: 600rpx; */
		}
 
		.swiper-item {
			display: block;
			/* height: 100%; */
			text-align: center;
		}
 
	}
 
	.active {
		opacity: 0.8;
	}
</style>

原文：https://blog.csdn.net/weixin_42204597/article/details/103829871
在这里记录一下