<template>

  <div class="container1" >
    <i-tabs class="tabs" :current=currentTab @change="handleClick($event)" >
      <i-tab key="tab0" title="语文"></i-tab>
      <i-tab key="tab1" title="数学"></i-tab>
      <i-tab key="tab2" title="英语"></i-tab>
    </i-tabs>
    <!-- 添加手势滑动 -->
    <swiper class="content1" :duration="50" :style="'height:'+contentHeight"
            @change="swiperChange" :current=currentContent @animationfinish="onAnimationfinish"
            >
      <swiper-item  v-for="(item,index) in tabs" :key="index">
        <div>
          <div v-if="true">
            <van-cell title="一年级" is-link value="进入考试"
                      label="▲▲▲▲"
                      @click="jump('一年级')" />
            <van-cell title="二年级" is-link value="进入考试"
                      label="▲▲▲▲"
                      @click="jump('二年级')" />
            <van-cell title="三年级" is-link value="进入考试"
                      label="▲▲▲▲"
                      @click="jump('三年级')" />
            <van-cell title="四年级" is-link value="进入考试"
                      label="▲▲▲▲"
                      @click="jump('四年级')" />
            <van-cell title="五年级" is-link value="进入考试"
                      label="▲▲▲▲"
                      @click="jump('五年级')" />
            <van-cell title="六年级" is-link value="进入考试"
                      label="▲▲▲▲"
                      @click="jump('六年级')" />
          </div>
          <van-cell>

          </van-cell>
        </div>
      </swiper-item>
    </swiper>
  </div>


</template>

<script>


export default {
  data () {
    return {
      //content高度
      contentHeight: "600px",
      //对应tab导航标签
      currentTab: "tab0",
      //对应tab内容标签
      currentContent: 0,


      tabs: ["tab0","tab1","tab2"]
    }
  },

  components: {
  },

  methods: {

    handleClick(event){
      this.currentTab = event.target.key;
      //取最后一位
      this.currentContent = this.currentTab.substr(this.currentTab.length-1,1);
      //console.log(this.currentTab);
      //console.log(this.currentContent);
    },
    onAnimationfinish() {

      console.log("滑动完成.....")
    },
    swiperChange(e) {
      this.currentContent = e.mp.detail.current;
      this.currentTab = "tab"+this.currentContent;
      console.log(this.currentContent);
    },
    jump(e){
      const url = "../testPaper/main?grade=" + e + "&subject=" + this.currentContent
      wx.navigateTo({
        url
      })
    },

  },

  created () {

  },



}
</script>

<style scoped>
  .tabs{
    min-height: 10%;
  }

</style>
