vue-awesome-swiper ---移動端h5 swiper 和 tab 欄選項聯動效果實現

很久之前做小程序時有個類似每日優鮮里儲值卡充值界面里的 卡輪播和價格tab欄聯動效果，當時覺得新鮮做出來之后也沒當回事。直到今天又遇到了一個類似的功能，所以想着總結經驗。

實現效果如下圖：

 

 圖解：點擊tab菜單 三個選項時，下面的輪播會隨之滑動，下面的商品列表也會根據上面的tab選項變化。反之，當左右滑動切換swiper時，tab選擇會隨之選中高亮，下面的商品列表也會跟着變化。

實現思路：tab選項的個數跟swiper 滑塊數量一致。可以根據當前選中/滑塊獲取索引值，展現相應的選中項/滑塊。下面要展示的商品列表，因為有下拉加載更多的需求，需要另一個接口完成實現。根據當前選中項的狀態值作為參數，去請求相對應得列表。

實現代碼如下：

1、首先在項目里 npm install swiper vue-awesome-swiper --save

2、在main.js全局引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// import style
import 'swiper/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3、或者在當前頁面局部引入

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
 
export default {
  components: {
    Swiper,
    SwiperSlide
  }
}

4、頁面上使用如下：

<div class="coupon_bot">
                <ul class="coupon_b_name">
                    <li v-for="(item,index) in cardList" 
                        :key="index" 
                        :class="{'actived':index == isActiveIndex}"
                        @click="handlerClick('cardChange',index)">
                       {{item.cardTypeName}}
                    </li>
                </ul>
                <swiper class="coupon_swiper swiper-container"  :options="swiperOption" ref="mySwiper">
                    <swiperSlide v-for="(item,index) in cardList" :key="index" class="coupon_s_slider">
                        <div class="conpon_swiper_bg">
                            <ul class="con_swiper_content">
                                <li>
                                    <span class="conpon_s_t">{{item.cardType == 1?'本月余額':'本月剩余'}}</span>
                                    <span class="conpon_s_c" :class="{'conpon_price':item.cardType == 1}">{{item.notGet}}</span>
                                    <i class="conpon_unit conpon_unit_ft" v-show="item.cardType != 1">張</i>
                                </li>
                                <li>
                                    <span class="conpon_s_t">{{item.cardType == 1?'已用額度':'本月已用'}}</span>
                                    <span :class="{'conpon_s_rprice':item.cardType == 1}" >{{item.isGet}}</span>
                                    <i class="conpon_unit"  v-show="item.cardType != 1">張</i>
                                </li>
                                <li>
                                    <span class="conpon_s_t">{{item.cardType == 1?'本月限額':'本月總數'}}</span>
                                    <span  :class="{'conpon_s_rprice':item.cardType == 1}">{{item.ttlGet}}</span>
                                    <i class="conpon_unit"  v-show="item.cardType != 1">張</i>
                                </li>
                            </ul>
                        </div>
                    </swiperSlide>
                </swiper>
            </div>

5、data里初始化swiper

 swiperOption: {
                autoplay: false,
                loop: false,
                spaceBetween : 10,
                observer: true,
                observeParents: true,
                on: {
                        slideChangeTransitionEnd: function(){
                            _this.isActiveIndex = this.realIndex;//切換結束時，告訴我現在是第幾個slide
                            _this.type = _this.cardList[_this.isActiveIndex].cardType;
                            _this.cardInfoList = [];
                            _this.pageNo = 1;
                            _this.isScroll = true;
                            _this.loading = true;
                            _this.getListData();
                        },
                }
            },

6、計算屬性獲取swiperDOM

 computed:{
        swiper(){
            return this.$refs.mySwiper.swiper
        }
    },

7、tab點擊事件實現

handlerClick(action,data){
            if(action == 'cardChange'){
                //tab切換
                this.loading = true;
                this.isActiveIndex = data;
                this.swiper.slideTo(this.isActiveIndex); //swiper滑動到相對應的滑塊
                document.documentElement.scrollTop = document.body.scrollTop = 0;
            }
}

8、相對應的swiper scss樣式如下

<style lang="scss" scoped>
@function rem($px) {
    @return $px / 75 * 1rem;
}
$bg-color: #fff;
$text-color: #587BF3;
$money-color: #FD8040;
$title-color: #999;
.coupon_bot{
            padding-top: rem(20);
            .coupon_b_name{
                display: flex;
                color: $bg-color;
                font-size: rem(32);
                li{
                    flex: 1;
                    justify-content: space-between;
                    text-align: center;
                    padding: rem(10) 0;
                }
                .actived{
                    position: relative;
                }
                .actived::before{
                    content:'';
                    display: inline-block;
                    width: rem(64);
                    height: rem(4);
                    background: $bg-color;
                    border-radius: 2px;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    margin-left: -13%;
                }
            }
            .coupon_swiper{
                padding: rem(30);
                .coupon_s_slider{
                    width: rem(690) !important;
                    height: rem(200);
                    box-shadow: 0px rem(20) rem(30) 0px rgba(0, 0, 0, 0.06);
                    background: $bg-color;
                    border-radius: 16px;
                    .conpon_swiper_bg{
                        width: 100%;
                        height: 100%;
                        background: url('../../../static/images/coupon/swiperBg.png') no-repeat top right;
                        background-size: rem(485) rem(220);
                        .con_swiper_content{
                            padding: rem(50) rem(30);
                            display: flex;
                            justify-content: space-between;
                            li {
                                width: 33%;
                                text-align: center;
                                span{
                                    color:#666;
                                    font-weight: 500;
                                    font-size: rem(40);
                                    line-height: rem(48);
                                }
                                .conpon_s_t {
                                    display: block;
                                    color: $title-color;
                                    font-size: rem(28);
                                    line-height: rem(42);
                                    margin-bottom: rem(30);
                                }
                                .conpon_s_c{
                                    text-align: left;
                                    display: inline-block;
                                    color: #333;
                                    font-size: rem(54);
                                }
                                .conpon_price{
                                    font-size: rem(36);
                                }
                                .conpon_s_rprice{
                                    font-size: rem(32);
                                }
                                .conpon_unit{
                                    font-style: normal;
                                    font-size: rem(28);
                                }
                                .conpon_unit_ft{
                                    font-size: rem(36);
                                }
                            }
                        }
                    }
                }
                >>>.swiper-slide-active{
                    height: rem(220);
                }
            }
        }
</style>

 

以上就實現了聯動效果了（代碼僅供參考）。