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);
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|