第一步:引入组件 import swiperGongGe from '@/components/function-list/swiper-gong-ge/swiper-gong-ge.vue'; 第二步:注册组件 export default { components:{ swiperGongGe } } 第三步:使用组件 参数说明 list:列表数据,默认以下数组: [ [ {url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'}, {url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'}, {url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'}, {url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'}, {url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'}, {url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'}, ], [ {url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'}, {url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'}, {url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'}, {url:'',iconsrc:'/static/tabbar/icon-scan.png',iconWidth:60,iconHeight:60,title:'标题五'}, ] ] ifAutoplay:是否自动轮播,默认false rowNum:一排显示数量,默认5 titlec:标题颜色,默认#000000 fonts:字体大小,默认28rpx titleTop:字体距离图标的距离,默认20rpx itemTop:item的顶部距离,默认30rpx activeStop:选中时指示点的颜色,默认rgba(0,0,0,1) moStop:未选中时指示点的颜色,默认rgba(0,0,0,.2) 方法使用 export default { methods:{ chooseGe(obj) { console.log(obj); }, } }