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

背景介绍

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

本文将介绍一款我们团队开发的组件:仿支付宝自定义可滑动轮播分页宫格菜单组件。该组件支持九宫格、十二宫格、十五宫格,并附带源码下载地址: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>

热门相关:洪荒二郎传   裙上之臣   戏精老公今天作死没   神算大小姐   猛男诞生记:开始变强