57 lines
1.9 KiB
Markdown
57 lines
1.9 KiB
Markdown
第一步：引入组件
|
||
|
||
import swiperGongGe from '@/components/function-list/swiper-gong-ge/swiper-gong-ge.vue';
|
||
|
||
第二步：注册组件
|
||
|
||
export default {
|
||
components:{
|
||
swiperGongGe
|
||
}
|
||
}
|
||
|
||
第三步：使用组件
|
||
|
||
<template>
|
||
<view>
|
||
<swiper-gong-ge @chooseGe="chooseGe"></swiper-gong-ge>
|
||
</view>
|
||
</template>
|
||
|
||
参数说明
|
||
|
||
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);
|
||
},
|
||
}
|
||
} |