前端开发vue手写标签切换和左右滑动

<template>
<div class=”stuMySign”>
<div class=”navhead”>
<ul class=”x-title” v-for=”(item, index) in items” @click=”tab(index)”>
<li :class=”{active: activeIndex === index}”>{{item.title}}</li>
</ul>
</div>
<div class=”sign-content” v-show=”activeIndex==0″>
<stuSign :date-sign=”dataUrl[0]”></stuSign>
</div>
<div class=”sign-content” v-show=”activeIndex==1″>
<stuSign :date-sign=”dataUrl[1]”></stuSign>
</div>
<div class=”sign-content” v-show=”activeIndex==2″>
<stuSign :date-sign=”dataUrl[2]”></stuSign>
</div>
<div class=”sign-content” v-show=”activeIndex==3″>
<stuSign :date-sign=”dataUrl[3]”></stuSign>
</div>

</div>
</template>

<style scoped>
*{padding: 0; margin: 0;-webkit-box-sizing:border-box;box-sizing:border-box}
.stuMySign{ overflow: hidden}
.navhead{ position: fixed; z-index: 999; top: 3rem; width: 100%;}
.navhead ul{ width: 25%;float: left; height: 2.5rem; line-height: 2.5rem;}
.navhead ul .active{ color: #f00;}
.sign-content{ position: fixed; left: 0; top: 0; padding-top:5.6rem; height: 100%; width: 100%; }

</style>