### 寫在前面 前面的文章中提到過，自己開始在博客園上更新文章。 說也奇怪，自己博客園賬號註冊了好久，都沒在上面更新過博客。 直到前段時間博客園的求助信息火了，才對博客園有了全新的認知。 博客園一個最大的特點就是簡潔、乾凈，廣告少。 但也有一個個人認為很不好的地方就是界面太醜，容易勸退新人。 直到 ...
背景介紹
隨著技術的不斷發展，傳統的開發方式使得系統的複雜度越來越高。在傳統開發過程中，一個小小的改動或者一個小功能的增加可能會導致整體邏輯的修改，造成牽一發而動全身的情況。為瞭解決這個問題，我們採用了組件化的開發模式。通過組件化開發，可以有效地實現單獨開發，單獨維護，而且它們之間可以隨意的進行組合。大大提升了開發的效率，降低了維護的成本。
本文將介紹一款我們團隊開發的組件：仿支付寶自定義可滑動輪播分頁宮格菜單組件。該組件支持九宮格、十二宮格、十五宮格，並附帶源碼下載地址：https://ext.dcloud.net.cn/plugin?id=13758
效果圖如下：
cc-nav-swiper
使用方法
<!-- list：數據 rowCount：行數 columnCount：列數 @itemClick：條目點擊事件 -->
<cc-nav-swiper :list="cateNavs" :rowCount="2" :columnCount="5" @itemClick="itemClick"></cc-nav-swiper>
// 數據設置
cateNavs: [{
url: '',
image: '/static/mock/index/cate-nav/domestic-appliance.png',
title: '家用電器',
},
{
url: '',
image: '/static/mock/index/cate-nav/electronics.png',
title: '數位電器',
},
{
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: '優惠券',
},
{
url: '',
image: '/static/mock/index/cate-nav/fees.png',
title: '充值繳費',
},
{
url: '',
image: '/static/mock/index/cate-nav/fruits.png',
title: '水果生鮮',
},
{
url: '',
image: '/static/mock/index/cate-nav/import.png',
title: '進口國際',
},
{
url: '',
image: '/static/mock/index/cate-nav/market.png',
title: '超市',
},
{
url: '',
image: '/static/mock/index/cate-nav/medicine.png',
title: '醫葯',
},
{
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: '會員',
},
{
url: '',
image: '/static/mock/index/cate-nav/more.png',
title: '更多',
}
],
//事件處理 條目點擊
itemClick(item){
uni.showModal({
title:'點擊條目數據',
content: '點擊條目數據 = ' + JSON.stringify(item)
})
}
HTML代碼實現部分
<template>
<view class="page">
<view style="height: 60px;"></view>
<!-- list：數據 rowCount：行數 columnCount：列數 @itemClick：條目點擊事件 -->
<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: '數位電器',
},
{
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: '優惠券',
},
{
url: '',
image: '/static/mock/index/cate-nav/fees.png',
title: '充值繳費',
},
{
url: '',
image: '/static/mock/index/cate-nav/fruits.png',
title: '水果生鮮',
},
{
url: '',
image: '/static/mock/index/cate-nav/import.png',
title: '進口國際',
},
{
url: '',
image: '/static/mock/index/cate-nav/market.png',
title: '超市',
},
{
url: '',
image: '/static/mock/index/cate-nav/medicine.png',
title: '醫葯',
},
{
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: '會員',
},
{
url: '',
image: '/static/mock/index/cate-nav/more.png',
title: '更多',
}
],
}
},
methods: {
// 條目點擊
itemClick(item){
uni.showModal({
title:'點擊條目數據',
content: '點擊條目數據 = ' + JSON.stringify(item)
})
}
},
}
</script>
<style lang="scss" scoped>
</style>
