快速實作vue uni-app宮格組件提供常見九宮格選單組件，擴充性好，可切換九宮格 十二宮格 十五宮格; 下載完整代碼請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=12680
效果圖如下：
使用方法
<!-- gridTitle:宮格名稱 gridNum: 一行展示格數 gridList：宮格資料 @click:宮格點擊按鈕 -->
<ccGridButton gridTitle="九宮格" gridNum="3" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宮格名稱 gridNum: 一行展示格數 gridList：宮格資料 @click:宮格點擊按鈕 -->
<ccGridButton gridTitle="十二宮格" gridNum="4" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宮格名稱 gridNum: 一行展示格數 gridList：宮格資料 @click:宮格點擊按鈕 -->
<ccGridButton gridTitle="十五宮格" gridNum="5" :gridList="gridList" @click="gridClick"></ccGridButton>
HTML代碼部分
<template>
<view>
<!-- gridTitle:宮格名稱 gridNum: 一行展示格數 gridList：宮格資料 @click:宮格點擊按鈕 -->
<ccGridButton gridTitle="九宮格" gridNum="3" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宮格名稱 gridNum: 一行展示格數 gridList：宮格資料 @click:宮格點擊按鈕 -->
<ccGridButton gridTitle="十二宮格" gridNum="4" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宮格名稱 gridNum: 一行展示格數 gridList：宮格資料 @click:宮格點擊按鈕 -->
<ccGridButton gridTitle="十五宮格" gridNum="5" :gridList="gridList" @click="gridClick"></ccGridButton>
</view>
</template>
JS代碼 （引入組件 填充資料）
<script>
import ccGridButton from '../components/ccGridButton.vue';
export default {
components:{
ccGridButton
},
data() {
return {
gridList: [{
name: '功能1',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能2',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能3',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能4',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能5',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能6',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能7',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能8',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能9',
imgSrc: "../../static/appointNum.svg",
},
]
}
},
methods: {
gridClick(item, index) { //格子選單點擊事件
console.log('item = ' + item.name + 'index = ' + index);
uni.showModal({
title:'溫馨提示',
content:'點擊的功能是: ' + item.name
})
}
}
}
</script>
CSS
<style lang="less" scoped>
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555004.html
標籤：Html/Css
下一篇：返回列表