uniapp使用scroll-view與swiper制作頂部導航欄

使用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 >
	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;
		}
	}

	.uni-margin-wrap {
		width: 100%;
		/* height: 600rpx; */

		.swiper {
			/* height: 600rpx; */
		}

		.swiper-item {
			display: block;
			/* height: 100%; */
			text-align: center;
		}

	}

	.active {
		opacity: 0.8;
	}
</style>
           

注意：代碼現在還有一點小問題   在左右滑動時   @change事件通路不到data裡面的資料   是以滑動時頂部切換直接用的數字，上面代碼裡面也有備注   css用的是scss 

切換原理     scroll-view  主要是動态改變   scroll-left      swiper主要是動态改變  current 的值     可以設定一個初始預設值    current：0        scroll-view點選事件改變current  切換swiper        swiper的@change事件  改變scroll-view的scroll-left 

看看代碼應該好了解   再次強調  此代碼有小問題    需要自己重新計算 scroll-view 的大小   

再提一點   擷取元素寬高時需要異步   這裡我采用的方法是使用定時器。