背景介紹
隨著技術(shù)的不斷發(fā)展，傳統(tǒng)的開發(fā)方式使得系統(tǒng)的復(fù)雜度越來越高。在傳統(tǒng)開發(fā)過程中，一個(gè)小小的改動(dòng)或者一個(gè)小功能的增加可能會(huì)導(dǎo)致整體邏輯的修改，造成牽一發(fā)而動(dòng)全身的情況。為了解決這個(gè)問題，我們采用了組件化的開發(fā)模式。通過組件化開發(fā)，可以有效地實(shí)現(xiàn)單獨(dú)開發(fā)，單獨(dú)維護(hù)，而且它們之間可以隨意的進(jìn)行組合。大大提升了開發(fā)的效率，降低了維護(hù)的成本。
本文將介紹一款我們團(tuán)隊(duì)開發(fā)的組件：仿支付寶自定義可滑動(dòng)輪播分頁宮格菜單組件。該組件支持九宮格、十二宮格、十五宮格，并附帶源碼下載地址：https://ext.dcloud.net.cn/plugin?id=13758
效果圖如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-604301.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-604301.html
cc-nav-swiper
使用方法
<!-- list：數(shù)據(jù) rowCount：行數(shù)? columnCount：列數(shù) @itemClick：條目點(diǎn)擊事件 -->
<cc-nav-swiper :list="cateNavs" :rowCount="2" :columnCount="5"? @itemClick="itemClick"></cc-nav-swiper>
// 數(shù)據(jù)設(shè)置
cateNavs: [{
url: '',
image: '/static/mock/index/cate-nav/domestic-appliance.png',
title: '家用電器',
},
{
url: '',
image: '/static/mock/index/cate-nav/electronics.png',
title: '數(shù)碼電器',
},
{
url: '',
image: '/static/mock/index/cate-nav/exchange.png',
title: '以舊換新',
}, {
url: '',
image: '/static/mock/index/cate-nav/clothes.png',
title: '服飾',
},
{
url: '',
image: '/static/mock/index/cate-nav/coupon.png',
title: '優(yōu)惠券',
},
{
url: '',
image: '/static/mock/index/cate-nav/fees.png',
title: '充值繳費(fèi)',
},
{
url: '',
image: '/static/mock/index/cate-nav/fruits.png',
title: '水果生鮮',
},
{
url: '',
image: '/static/mock/index/cate-nav/import.png',
title: '進(jìn)口國際',
},
{
url: '',
image: '/static/mock/index/cate-nav/market.png',
title: '超市',
},
{
url: '',
image: '/static/mock/index/cate-nav/medicine.png',
title: '醫(yī)藥',
},
{
url: '',
image: '/static/mock/index/cate-nav/pet.png',
title: '萌寵',
},
{
url: '',
image: '/static/mock/index/cate-nav/travel.png',
title: '旅行',
},
{
url: '',
image: '/static/mock/index/cate-nav/vip.png',
title: '會(huì)員',
},
{
url: '',
image: '/static/mock/index/cate-nav/more.png',
title: '更多',
}
],
//事件處理 條目點(diǎn)擊
itemClick(item){
uni.showModal({
title:'點(diǎn)擊條目數(shù)據(jù)',
content: '點(diǎn)擊條目數(shù)據(jù) = ' + JSON.stringify(item)
})
}
HTML代碼實(shí)現(xiàn)部分
<template>
<view class="page">
<view style="height: 60px;"></view>
<!-- list：數(shù)據(jù) rowCount：行數(shù)? columnCount：列數(shù) @itemClick：條目點(diǎn)擊事件 -->
<cc-nav-swiper :list="cateNavs" :rowCount="2" :columnCount="5"? @itemClick="itemClick"></cc-nav-swiper>
</view>
</template>
<script>
export default {
data() {
return {
cateNavs: [{
url: '',
image: '/static/mock/index/cate-nav/domestic-appliance.png',
title: '家用電器',
},
{
url: '',
image: '/static/mock/index/cate-nav/electronics.png',
title: '數(shù)碼電器',
},
{
url: '',
image: '/static/mock/index/cate-nav/exchange.png',
title: '以舊換新',
}, {
url: '',
image: '/static/mock/index/cate-nav/clothes.png',
title: '服飾',
},
{
url: '',
image: '/static/mock/index/cate-nav/coupon.png',
title: '優(yōu)惠券',
},
{
url: '',
image: '/static/mock/index/cate-nav/fees.png',
title: '充值繳費(fèi)',
},
{
url: '',
image: '/static/mock/index/cate-nav/fruits.png',
title: '水果生鮮',
},
{
url: '',
image: '/static/mock/index/cate-nav/import.png',
title: '進(jìn)口國際',
},
{
url: '',
image: '/static/mock/index/cate-nav/market.png',
title: '超市',
},
{
url: '',
image: '/static/mock/index/cate-nav/medicine.png',
title: '醫(yī)藥',
},
{
url: '',
image: '/static/mock/index/cate-nav/pet.png',
title: '萌寵',
},
{
url: '',
image: '/static/mock/index/cate-nav/travel.png',
title: '旅行',
},
{
url: '',
image: '/static/mock/index/cate-nav/vip.png',
title: '會(huì)員',
},
{
url: '',
image: '/static/mock/index/cate-nav/more.png',
title: '更多',
}
],
}
},
methods: {
// 條目點(diǎn)擊
itemClick(item){
uni.showModal({
title:'點(diǎn)擊條目數(shù)據(jù)',
content: '點(diǎn)擊條目數(shù)據(jù) = ' + JSON.stringify(item)
})
}
},
}
</script>
<style lang="scss" scoped>
</style>
到了這里，關(guān)于前端Vue仿支付寶自定義可滑動(dòng)輪播分頁宮格菜單組件，可支持九宮格 十二宮格 十五宮格的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
