頂部滑動導航菜單欄

參考：https://ext.dcloud.net.cn/plugin?id=738

 

• template使用

<template>
	<view class="slidingMenu">
		<haverster-slidingMenu :list="list" :color="color" @changes="getIndex"></haverster-slidingMenu>
		<view class="contentList">
			<image :src="imageList[activeIndex]" mode=""></image>
		</view>
	</view>
</template>

 

• JS

<script>
	import haversterSlidingMenu from '@/components/haverster-slidingMenu/haversterSlidingMenu.vue';
	export default {
		components: { haversterSlidingMenu },
		data() {
			return {
				list: ['男裝', '母嬰', '數碼', '箱包', '生鮮', '食品', '飾品', '女裝'], //默認傳到頂部菜單欄的數據
				activeIndex: '0', ///菜單欄選中狀態的index值
				color: 'white', //設置菜單的背景顏色
				imageList: [
					'http://pic1.win4000.com/mobile/2018-09-04/5b8dece4e565c.jpg',
					'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=239553082,2832910159&fm=115&gp=0.jpg',
					'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2358570013,1985123782&fm=26&gp=0.jpg',
					'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2914575322,940354749&fm=115&gp=0.jpg',
					'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3065463705,1034625646&fm=115&gp=0.jpg',
					'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=577097343,3406258596&fm=26&gp=0.jpg',
					"http://pic1.win4000.com/mobile/2018-09-04/5b8dece5b9dbe.jpg",
					"http://pic1.win4000.com/mobile/2018-09-04/5b8dece9ee511.jpg"
				],//下面圖片顯示
			};
		},
		onLoad() {},
		methods: {
			getIndex(e) {
				this.activeIndex = e;
			}
		}
	};
</script>

 

• CSS

page{
		background-color: #FAFAFA;
	}
	.contentList {
		width: 750upx;
		height: 500px;
		margin-top: 20upx;
	}
	.contentList image {
		width: 100%;
		height: 100%;
	}
	.slidingMenu{
		
	}

 

• 最后附上haversterSlidingMenu.vue

<template>
	<scroll-view class="uni-slidingMenu" scroll-x :style="{background: color}">
		<view  :class="['slidingMenuList',activeIndex==index?'active':'']" v-for="(item, index) in list" :key="index" @click="getActive(index)" v-cloak>{{ item }}</view>
	</scroll-view>
</template>

<script>
export default {
	name: 'uniSlidingMenu',
	props:{
		// 列表菜單
		list:{
			type: Array,
			// default:['首頁1', '首頁2', '首頁3', '首頁4', '首頁4', '首頁4', '首頁4', '首頁4']
		},
		color:{
			type:String,
			default:'#777777'
		}
		
	},
	data() {
		return {
			// list: ['首頁1', '首頁2', '首頁3', '首頁4', '首頁4', '首頁4', '首頁4', '首頁4'],
			activeIndex:"0"
		};
	},
	methods:{
		getActive(index){
			this.activeIndex=index;
			this.$emit("changes",this.activeIndex);
		}
	}
};
</script>

<style>
	page{
		background-color: #fafafa;
	}
/* 滑動菜單欄的總內容區域 */
.uni-slidingMenu {
	width: 100%;
	white-space: nowrap;
	height: 80rpx;
	background-color: #FFFFFF;
}
/* 循環顯示的菜單欄 */
.slidingMenuList {
	height: 80rpx;
	line-height: 80rpx;
	display: inline-block;
	font-size: 24rpx;
	margin-left: 60rpx;
}
.slidingMenuList:last-child{
	margin-right: 60rpx;
}
/* 點擊選中菜單欄時的樣式 */
.active {
	color: pink;
	font-size: 28rpx;
	margin-left: 80rpx;
	border-bottom: 2rpx solid pink;
	box-sizing: border-box;
}
</style>