【首页】顶栏滑块功能开发

一、【首页】顶栏滑块功能开发

1.1 完成效果：

1.2 顶部滑块数据：

topBar:[

     {name:'推荐'},

     {name:'运动户外'},

     {name:'服饰内衣'},

     {name:'鞋靴箱包'},

     {name:'美妆个护'},

     {name:'家居数码'},

     {name:'食品母婴'}

]

1.3 顶部滑块样式布局：

<scroll-view scroll-x="true" class="scroll-content">
		<view
			  class="scroll-item"
			  v-for="(item,index) in topbar"
			  :key='index'
			  @tap='changetab(index)'
		>
			<text :class='topbarindex===index?"f-active-color":"f-color"'>{{item.name}}</text>
		</view>
</scroll-view>

1.4 内容滑动部分：

<swiper @change="onchangetab" :current="topbarindex">
		<swiper-item 
			  v-for="(item,index) in topbar"
			  :key="index">
				<view >{{item.name}}</view>
		</swiper-item>
</swiper>

1.5 方法定义点击滑动跳转：

methods: {
		changetab(index){
			if(this.topbarindex === index){
				return;
			}
			this.topbarindex = index;
		},
		onchangetab(e){
			this.changetab(e.detail.current);
		}
}

1.6 对应index.vue中的代码

<template>
	<view class="index">
		<scroll-view scroll-x="true" class="scroll-content">
			<view
			  class="scroll-item"
			  v-for="(item,index) in topbar"
			  :key='index'
			  @tap='changetab(index)'
			>
				<text :class='topbarindex===index?"f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		
		<swiper @change="onchangetab" :current="topbarindex">
			<swiper-item 
			  v-for="(item,index) in topbar"
			  :key="index">
				<view >{{item.name}}</view>
			</swiper-item>
		</swiper>
		
		<!--推荐模板-->
		<!--<indexswiper></indexswiper>
		<recommend></recommend>
		<card cardtitle='猜你喜欢'></card>
		<commoditylist></commoditylist>-->
		
		<!--其他模板：运动户外、美妆....-->
		<!--<banner></banner>
		<icons></icons>
		<card cardtitle='热销爆品'></card>
		<hot></hot>
		<card cardtitle='推荐店铺'></card>
		<shop></shop>
		<card cardtitle='为您推荐'></card>
		<commoditylist></commoditylist>-->
	</view>
</template>

<script>
	import indexswiper from '@/components/index/indexswiper.vue'
	import recommend from '@/components/index/recommend.vue'
	import card from '@/components/common/card.vue'
	import commoditylist from '@/components/common/commoditylist.vue'
	import banner from '@/components/index/banner.vue'
	import icons from '@/components/index/icons.vue'
	import hot from '@/components/index/hot.vue'
	import shop from '@/components/index/shop.vue'
	export default {
		data() {
			return {
				//选中的索引
				topbarindex:0,
				//顶栏数据
				topbar:[
					{name:'推荐'},
					{name:'运动户外'},
					{name:'服饰内衣'},
					{name:'鞋靴箱包'},
					{name:'美妆个护'},
					{name:'家居数码'},
					{name:'食品母婴'}
				]
			}
    	},
		components:{
			indexswiper,
			recommend,
			card,
			commoditylist,
			banner,
			icons,
			hot,
			shop
		},
		onLoad() {

		},
		methods: {
			changetab(index){
				if(this.topbarindex === index){
					return;
				}
				this.topbarindex = index;
			},
			onchangetab(e){
				this.changetab(e.detail.current);
			}
		}
	}
</script>

<style scoped>
	.scroll-content{
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}
	.scroll-item{
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 32rpx;
	}
	.f-active-color{
		padding: 10rpx 0;
		border-bottom: 6rpx solid #cc0000;
	}
</style>