vue 导航栏和内容点击联动 内容滑动联动

<template>
  <div>
    <Lunbo />
    <div class="g-center">
      <div class="g-nav flex">
        <span class="iconfont icon-information"></span>
        <h3>{{bd_news.category_title}}</h3>
        <div class="time-nav">
          <a :class="{'b-active' : news_index===index}" href="#" @click="$refs.hero.swiper.slideTo(index)" v-for="(list,index) in bd_news.news_list" :key="index">{{list.news_type}}</a>
         
        </div>
      </div>
      <div class="hot-list">
        <swiper
          :options="{autoHeight:true,onSlideChangeEnd:function(){news_index = $refs.hero.swiper.realIndex}}"
          ref="hero"
        >
          <swiper-slide v-for="(list,index) in bd_news.news_list" :key="index">
            <ul v-for="(item,i) in list.type_news_list" :key="i" v-show="btn_t || i<3">
              <li class="list-1 flex"  v-if="i===0">
                <div class="hot-img" >
                  <img :src="item.news_img" alt />
                  <span class="iconfont icon-bofang"></span>
                </div>
                <div class="hot-title">
                  <span class="hot-l">{{item.news_title}}</span>
                  <div class="flex hot-r">
                    <div>
                      <span class="iconfont icon-shipin"></span>
                      <span>{{item.news_num}}</span>
                    </div>
                    <div>
                      <span class="iconfont icon-shijian"></span>
                      <span>{{item.news_date}}</span>
                    </div>
                  </div>
                </div>
              </li>
              <li class="list-2 flex" v-else>
                <div class="list-2-r ellipsis">{{item.news_title}}</div>
                <div class="list-2-l">
                  <span class="iconfont icon-shipin"></span>
                  <span>{{item.news_num}}</span>
                </div>
              </li>
            
            </ul>
          </swiper-slide>
        </swiper>
      </div>
      <div class="hot-btn" @click="changeBtn()">
          {{btn_t ? "收起榜单":"查看完整榜单"}}     
        </div>
    </div>
    <div class="g-icont">
         <div class="g-nav flex">
            <span class="iconfont icon-information"></span>
            <h3>英雄攻略</h3>       
        </div>
        <div class="img-list">
            <ul class="flex">
                <li>
                    <img src="../../static/images/501.jpg">
                    <span>热门</span>
                </li>
                <li>
                    <img src="../../static/images/502.jpg">
                    <span>热门</span>
                </li>
                <li>
                    <img src="../../static/images/503.jpg">
                    <span>热门</span>
                </li>
                <li>
                    <img src="../../static/images/504.jpg">
                    <span>限免</span>
                </li>
                <li>
                    <img src="../../static/images/505.jpg">
                    <span>限免</span>
                </li>
                <li>
                    <img src="../../static/images/506.jpg">
                    <span>最新</span>
                </li>
                <li class="p-text" @click="show_bt = !show_bt">
                    <p>{{show_bt?'收起':'展开'}}</p>
                </li>                
            </ul>
            <div class="ic-list flex" v-show="show_bt">
                <div class="ic-l">                  
                            <div class="imgs-list flex"  v-for="(list,index) in heros_list.news_list" :key="index" v-show="hr_index===index">
                            <a href="" v-for="(item,i) in list.type_news_list" :key="i">
                                <img  class="imgs" :src="item.img_url" alt="" >
                                <p>{{item.name}}</p>
                            </a>                                
                            </div>    
                </div>
                <div class="ic-r">
                    <ul class="flex">
                        <li v-for="(items,index) in heros_list.news_list" :key="index" @click="changeHr(index)" :class="{'gds' : hr_index===index}">{{items.news_type}}</li>                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div style="width:100%;height:200px;background:#fff;margin-top:20px"></div>
  </div>
</template>
<script>
import bd_news from '../data/bd_news.json'
import herosData from "../data/heros.json"
import Lunbo from "../components/Lunbo.vue";
export default {  
  data() {
    return {
      news_index: 0,
      active: 0,
      btn_t:false,
      bd_news:{},
      heros_list:{},
      hr_index:0,
      show_bt:false,
    }
  },
  methods: {
    changeIndex() {
      this.news_index = this.$refs.hero.swiper.realIndex;
    },
     changeBtn() {
      this.btn_t = !this.btn_t;
    },
    changeHr(index) {
      this.hr_index = index;
    },
  },
  computed:{

  },
   mounted() { 
    this.$nextTick(()=>{
       this.bd_news=bd_news[0] 
       this.heros_list=herosData[0]     
    })      
  },
  components: {
    Lunbo
  }
};
</script>
<style lang="scss" >

</style>