封装swiper-view 选项卡导航条字体高亮，下标跟随

使用了Vue-cli开发 封装

先来看效果吧

效果图

---

swiper-view由两个部分组成

使用vue-awesome-swiper

//main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import 'swiper/dist/js/swiper.min'

1.header
2.content

swiper-view组件结构

---

控制header参数

参数 介绍 类型 可选值 默认值

参数	介绍	类型	默认值
iconClass	选项卡最右边icon	String	' '
iconColor	选项卡颜色	String	'#fff'
blurColor	未选中颜色	String	'rgb(126,159,175)'
activeColor	选中的颜色	String	'rgb(255,255,255)'
bgColor	背景颜色	String	''
barwidth	下标宽度(px)	Number	32
tSpeed	下标释放移动速度(ms)	Number	300
slidesPerView	一排显示多少个	Number	3
headerResistanceRatio	边缘抵抗力的大小比例(0-1)	Number	0
freeMode	自由滑动	Boolean	true

方法

方法名	介绍	参数
handleIconClick	tabs最右边icon按钮	event
handelItemClick	选项卡按钮icon按钮	event,index
handelTabTouchStart	滑动开始时	event
handelTabTouchMove	滑动中	event
handelTabTouchEnd	滑动结束	event
headerSwiper	header初始化(不建议修改)	tabsSwiper对象

---

控制content参数

参数	介绍	类型	默认值
contentResistanceRatio	边缘抵抗力的大小比例	Number	0
initialSlideIndex	刷新页面后swiper跳转到对应路由的index	Number	-1

方法

方法名	介绍	参数
viewClick	点击事件	event
handelViewTouchStart	滑动开始时	event
handelViewTouchMove	滑动中	event
handelViewTouchEnd	滑动结束时	event
viewTransitionStart	回调函数，过渡开始时触发	没有

---

父组件使用方式

注意dataList的json结构...键一定要是title,component

---

操作swiper

在swiper-view中定义ref 写在计算属性中，就可以拿来使用了

//父组件

---

父组件修改样式

使用 >>> 穿透的方式修改

.mind-swiper-view-wrapper>>>.bar .color {
  background: red !important;
}

---

给header的item加上icon

//父组件

    

    

slot为component名字+index

---

源码