vue中使用swiper做輪播頁面，標題樣式隨着輪播頁面改變而改變

vue中使用swiper做輪播頁面，標題樣式隨着輪播頁面改變而改變

知識點: 標題組件與輪播組件之間交互（vue兄弟組件之間傳值）

兄弟之間傳遞數據需要借助於事件車，通過事件車的方式傳遞數據

1、創建一個Vue的實例，讓各個兄弟共用同一個事件機制。

2、傳遞數據方，通過一個事件觸發bus.$emit(方法名，傳遞的數據)。

3、接收數據方，通過mounted(){}觸發bus.$on(方法名，function(接收數據的參數){用該組件的數據接收傳遞過來的數據})，此時函數中的this已經發生了改變，可以使用箭頭函數。

實例如下：

我們可以創建一個單獨的js文件eventVue.js,內容如下

import Vue from 'vue';
 
export default new Vue();

　　

整個文件這兩句就夠啦！！！！

標題組件

子組件1

• 文件名： nav.vue

<template>
  <div class="nav-container">
    <ul style="padding: 0">
      <li v-for="(item, index) in newBreadcrumb" 
      :key="index"
      :class="nowIndex===index ? 'selected-nav nav-title':'unselected-nav nav-title'">
      {{item.name}}
      <span class="line">/</span>
      </li>
    </ul>
  </div>
</template>
<script>
import eventHub from '../../../../commonJS/eventVue.js'
export default {
  props:['breadcrumb'],
  data(){
    return {
      newBreadcrumb: [],
      nowIndex: 0,
    }
  },
  created(){
    console.log("breadcrumb", this.breadcrumb) //父子組件傳值，傳過來一個標題數組
    //對數組進行處理，轉為數組對象，給原數組成員加了key，為name
    for(let i in this.breadcrumb){
      let breadcrumbObject = {}
      this.$set(breadcrumbObject, 'name', this.breadcrumb[i] )
      this.newBreadcrumb.push(breadcrumbObject)
    }
    
  },
  mounted(){
    //nav組件接收swiper組件滑動時傳過來的index
    eventHub.$on('slideTab', (index)=>{
      this.nowIndex = index
    });
  },
}
</script>
<style>
.nav-container {
  font-size: 0;
  padding: .2rem 0 0 .2rem;
}
.nav-title {
  font-family: "DINPro-Medium";
  font-size: 0.18rem;
}
li {
  display:inline-block;
}
.nav-title:nth-child(3) .line{
  display: none;
}
.selected-nav {
  color: #554344;
}
.unselected-nav {
  color: #B8B8B8;
}
</style>

 

子組件2

• 文件名： swiper.vue

<template>
  <div router>
    <div v-for="(route, index) in $router.options.routes" :key="index">
          <!-- {{route.name}} -->
      <div v-if="route.name === 'CompetitionObjective'">
        <template v-for="(items, index) in route.children">
            <swiper
            :key="index"
            v-if="items.path === 'MRtableAssociation/'"
            :options="swiperOption"
            ref="mySwiper"
            >
            <swiper-slide
                v-for="(item, index) in items.children"
                :key="index"
                class="mdrt-item"
            >
                <keep-alive>
                <component :is="item.component" v-bind:MDRTcompetitionCd="MDRTcompetitionCd" v-if="MDRTcompetitionCd.length>0"></component>
                </keep-alive>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import eventHub from '../../../../commonJS/eventVue.js'
export default {
  props:{
    MDRTcompetitionCd: {
      type: String,
      default: ""
    }
  },
  data(){
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        },
      }
    }
  },
  mounted() {
      var mySwiper = this.$refs['mySwiper'][0].swiper
      mySwiper.on('slideChange', () => { // 監控滑動后當前頁面的索引，將索引發射到導航組件
      // 左右滑動時將當前slide的索引發送到nav組件,eventHub是兄弟組件之間傳值的橋梁
      eventHub.$emit('slideTab', mySwiper.activeIndex);
    });
  }
}
</script>
<style scoped>
.swiper-table {
  height: 3.65rem;
  border-top: 0.01rem solid #d8d8d8;
}

.swiper-table >>> .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: -0.2rem;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.swiper-table >>> .swiper-pagination-bullet-active {
  background: #d31145 !important;
  /* width: .34rem !important; */
}
.mdrt-item {
  font-family: 'DINPro-Medium';
  font-size: .18rem;
  color: #554344 !important;
} 
</style>

 

父組件：

關鍵代碼

<v-nav :breadcrumb='breadcrumb' v-if="breadcrumb.length > 0"></v-nav>
<v-swiper :MDRTcompetitionCd='MDRTcompetitionCd'></v-swiper>

　　

如有問題歡迎指正：qq: 1534147975