【首页】顶栏滑动跟随

一、【首页】顶栏滑动跟随

1.1 顶部滑动跟随需要在scroll-view中添加scroll-into-view属性，其中代表滚动到哪个块中，匹配为子元素的id，也就是子元素需要加入id值，但是id值不可以为数字开头，那么代码如下：

1.2 在changeTab方法中写入this.scrollIntoIndex = 'top'+index;

1.3在index.vue中的具体代码如下

<template>
	<view class="index">
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollintoindex">
			<view
			  :id="'top'+index"
			  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,
				//顶栏跟随的索引id值
				scrollintoindex:"top0",
				//顶栏数据
				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;
				this.scrollintoindex = 'top'+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>