很久之前做小程序时有个类似每日优鲜里储值卡充值界面里的 卡轮播和价格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 } */)