前端Vue仿支付宝自定义可滑动轮播分页宫格菜单组件，可支持九宫格 十二宫格 十五宫格

背景介绍

随着技术的不断发展，传统的开发方式使得系统的复杂度越来越高。在传统开发过程中，一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改，造成牵一发而动全身的情况。为了解决这个问题，我们采用了组件化的开发模式。通过组件化开发，可以有效地实现单独开发，单独维护，而且它们之间可以随意的进行组合。大大提升了开发的效率，降低了维护的成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

本文将介绍一款我们团队开发的组件：仿支付宝自定义可滑动轮播分页宫格菜单组件。该组件支持九宫格、十二宫格、十五宫格，

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>

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发
## 效果图如下：