前端Vue与uni-app中的九宫格、十二宫格和十五宫格菜单组件实现

在前端 Vue 开发中,我们经常会遇到需要开发九宫格、十二宫格和十五宫格菜单按钮的需求。这些菜单按钮通常用于展示不同的内容或功能,提供给用户快速访问和选择。

图片

一、引言

在前端开发中,九宫格、十二宫格和十五宫格菜单按钮是一种常见的布局方式,它们能有效地展示大量数据,并为用户提供便捷的操作。在Vue和Uni-app框架下,我们可以快速地实现这些功能。本文将介绍如何使用Vue和Uni-app构建一个九宫格、十二宫格和十五宫格的菜单组件,并详细介绍其使用方法和功能。

二、技术选型

我们选择了Vue.js作为主要的前端框架,因为它具有组件化、响应式等特点,非常适合构建复杂的单页应用。对于多宫格布局的实现,我们将使用Uni-app框架,它支持跨平台开发,可以轻松地构建出满足需求的九宫格、十二宫格和十五宫格布局。

三、实现过程

  1. 创建组件

首先,我们需要创建一个名为ccGridButton的组件,该组件将用于显示九宫格、十二宫格和十五宫格的菜单按钮。在组件中,我们将使用v-for指令来循环渲染每个按钮,并根据传入的参数调整布局。

  1. 定义参数

ccGridButton组件中,我们需要定义一些参数来控制布局和按钮的行为。这些参数包括:gridTitle(宫格标题)、gridNum(每行展示的格数)和gridList(宫格数据列表)。同时,我们还需要定义一个点击事件处理函数@click,用于处理按钮的点击事件。

  1. 渲染按钮

接下来,我们需要使用v-for指令来循环渲染每个按钮。在循环中,我们可以使用插值表达式来显示按钮的文本内容,并根据传入的参数调整按钮的位置和样式。同时,我们还可以为每个按钮绑定一个点击事件处理函数,以便在用户点击按钮时触发相应的操作。

  1. 处理点击事件

在点击事件处理函数中,我们可以根据传入的参数执行相应的操作。例如,我们可以将当前选中的按钮高亮显示,或者跳转到相应的页面等。具体的逻辑可以根据实际需求进行定制。

四、使用方法

要使用ccGridButton组件,我们需要在父组件中引入并注册该组件,然后根据需要传入相应的参数和事件处理函数。例如,下面的代码演示了如何使用ccGridButton组件来创建一个九宫格、十二宫格和十五宫格的菜单按钮:

 

cc-gonggeGrid

使用方法
复制代码
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @gridClick:宫格点击按钮 -->
<cc-gonggeGrid gridTitle="九宫格" gridNum="3" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid><!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @gridClick:宫格点击按钮 -->
<cc-gonggeGrid gridTitle="十二宫格" gridNum="4" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid><!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @gridClick:宫格点击按钮 -->
<cc-gonggeGrid gridTitle="十五宫格" gridNum="5" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid>
HTML代码实现部分
复制代码<template><view><!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @gridClick:宫格点击按钮 --><cc-gonggeGrid gridTitle="九宫格" gridNum="3" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid><!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @gridClick:宫格点击按钮 --><cc-gonggeGrid gridTitle="十二宫格" gridNum="4" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid><!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList:宫格数据 @gridClick:宫格点击按钮 --><cc-gonggeGrid gridTitle="十五宫格" gridNum="5" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid></view>
</template><script>export default {components: {},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><style lang="less" scoped></style>

部分截图

 

图片

 

图片

附组件及示例代码下载地址:

https://ext.dcloud.net.cn/plugin?id=12680

  请关注我的微信技术公众号: 前端组件开发

d848d5658a07453c843277846948c608.png

 欢迎加入我们的前端组件学习交流群,可添加群主微信,审核通过后入群。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/750965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

202206 CSP认证 | 角色授权

角色授权 fine&#xff0c;又是一道acwing上TLE但是平台通过了的&#xff0c;那就酱吧… 直接跟着题目来模拟的…先找到每个用户授予的所有角色&#xff0c;包括用户本身和它所属的用户组。 然后遍历这个角色集合&#xff0c;看是否有操作权限&#xff0c;种类权限以及资源名称…

Android 辅助功能 -抢红包

Android 辅助功能 -抢红包 本篇文章主要介绍下通过android辅助功能的方式来实现类似抢红包的功能. 1:权限声明 <uses-permissionandroid:name"android.permission.BIND_ACCESSIBILITY_SERVICE"tools:ignore"ProtectedPermissions" />2: 配置信息 …

SVN修改已提交版本的注释

目录 一、需求分析 二、问题分析 三、解决办法 一、需求分析 ​开发过程中&#xff0c;在SVN提交文件后&#xff0c;发现注释写的不完整或不够明确&#xff0c;想再修改之前的注释文字​。 使用环境&#xff1a; SVN服务器操作系统&#xff1a;Ubuntu 20.04.6 LTS SVN版本&…

Numpy数轴编号规则

当在NumPy数组中增加维度时&#xff0c;轴号的分配遵循一个明确的规则&#xff1a;每个新添加的维度都会作为一个新的轴被添加到数组形状的最前面&#xff0c;这意味着新轴成为轴0&#xff0c;原有的所有轴号随之增加。 精准描述&#xff1a; 对于一个已存在的N维数组&#x…

C语言实现二叉树

#include <stdio.h> #include <stdlib.h> // 定义二叉树节点结构体 typedef struct TreeNode { int value; struct TreeNode *left; struct TreeNode *right; } TreeNode; // 创建二叉树节点的函数 TreeNode* createNode(int value) { TreeNod…

JVM实战篇

内存调优 内存溢出和内存泄漏 内存泄漏&#xff1a;在java中如果不再使用一个对象&#xff0c;但是该对象依然在GC ROOT的引用链上&#xff0c;这个对象就不会被垃圾回收器回收。 内存泄漏绝大多数情况都是由堆内存泄漏引起的&#xff0c;所以后续没有特别说明则讨论的都是堆…

Linux-centos如何搭建yum源仓库

1.本地搭建&#xff08;无需连接外网&#xff09; 1.1检查网络配置&#xff0c;及网络连接 打开虚拟机&#xff0c;点击【编辑——虚拟网络编辑器】 点击【仅主机模式】查看子网段是否和局内IP匹配 进入局内&#xff0c;查看网络IP是否在你上述设置的网段内&#xff0c;如果不…

Chapter 13 Techniques of Design-Oriented Analysis: The Feedback Theorem

Chapter 13 Techniques of Design-Oriented Analysis: The Feedback Theorem 从这一章开始讲负反馈Control系统和小信号建模. 13.2 The Feedback Theorem 首先介绍 Middlebrook’s Feedback Theorem 考虑下面负反馈系统 传输函数 Guo/ui G ( s ) u o u i G ∞ T 1 T G…

1.实用Qt:解决绘制圆角边框时,圆角锯齿问题

目录 问题描述 解决方案 方案1&#xff1a; 方案2&#xff1a; 结果示意图 问题描述 做UI的时候&#xff0c;我们很多时候需要给绘制一个圆角边框&#xff0c;初识Qt绘制的童鞋&#xff0c;可能绘制出来的圆角边框很是锯齿&#xff0c;而且粗细不均匀&#xff0c;如下图&…

Vue | 使用 ECharts 绘制折线图

目录 一、安装和引入 ECharts 二、使用 ECharts 2.1 新增 div 盒子 2.2 编写画图函数 2.3 完整代码结构 三、各种小问题 3.1 函数调用问题 3.2 数据格式问题 3.3 坐标轴标签问题 3.4 间隔显示标签 参考博客&#xff1a;Vue —— ECharts实现折线图 本文是在上…

JVM学习-JVM简介以及其内部结构

目录 1.什么是JVM 2.JVM、JRE、JDK、JavaSE、JavaEE之间的联系 3.JVM的内部结构 4.各部分的作用 4.1 类加载器 4.2 方法区 4.3 堆 ​编辑 4.4 虚拟机栈 4.5 程序计数器 4.6 本地方法栈 4.7 解释器和JIT即时编译器 4.9 GC垃圾回收 5.拓展 5.1一些可能会遇到的问…

opencv安装(C++)并配置vs

准备工作&#xff1a; 1.opencv安装包(此教程使用4.9) 2.visual studio(此教程使用vs2019) opencv安装&#xff1a; 1、下载opencv&#xff1a; 1.1 官网下载&#xff1a;Releases - OpenCV 1.2 百度网盘&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1NpEoFjbbyQJtFD…

CTF-希尔加解密

对于希尔加解密很多writeup都说用在线工具&#xff0c;所以研究了一下&#xff0c;写了一个方便的加解密python代码&#xff0c;根据给定的字母表及私钥字符串&#xff0c;尝试不同纬度不同重叠的加密矩阵输出加解密结果。运行效果如下&#xff1a; 代码文件Hill希尔加解密_fi…

8:00面试,8:06就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到9月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…

Portal

文章目录 定义用法事件冒泡 定义 Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法。 ReactDOM.createPortal(child,container);第一个参数child是可渲染的react子项&#xff0c;比如元素&#xff0c;字符串或者片段等。第二个参数container是一…

matlab simulink 工业现场漆包机烘炉模糊PID控制算法

1、内容简介 略 70-可以交流、咨询、答疑 2、内容说明 matlab simulink 工业现场漆包机烘炉模糊PID控制算法 第五章 控制算法仿真与分析 在第二章系统分析结合工业现场漆包机烘炉数学模型详细分析模糊PID控制算法以及解耦控制算法的优缺点、实现原理&#xff0c;为本章算法…

第8节课------列生成与分支定价法

列生成与分支定价法 1. 列生成 通过迭代的方式来构建和解决一个“受限”的主问题,并通过解决一系列相关的子问题来动态地生成新的变量(或称列),这些新变量有可能改进主问题的解。 原问题新添加的这一列可以通过对偶问题的行来计算。 2. 列生成的详细说明 对于原来的…

【TB作品】数字电压表设计,MSP430,电压表,Proteus仿真,分档位

文章目录 题目要求第1版方案第2版方案代码介绍获取代码和仿真 题目要求 33、数字电压表设计 基本要求: 了解电压表的工作原理。 对0~2.5V的模拟电压进行循环采集 采集的数据进行A/D转换后用LCD屏显示测量值,显示精度0.0001 用键盘选择测量范围(分档) 超过测量范围时指示灯持续…

20240316-回溯算法

分类 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合 切割问题&#xff1a;一个字符串按一定规则有几种切割方式 子集问题&#xff1a;一个N个数的集合里有多少符合条件的子集 排列问题&#xff1a;N个数按一定规则全排列&#xff0c;有几种排列方式 棋盘问题&#…

基于springboot+vue实现员工信息管理系统项目【项目源码+论文说明】

基于springbootvue实现员工信息管理系统演示 引言 随着计算机技术的飞速发展&#xff0c;计算机在企业管理中应用的普及&#xff0c;利用计算机在实现企业人事档案的管理势在必行。当今社会正快速向信息化社会前进&#xff0c;信息自动化的作用也越来越大。从而使我们从繁杂的…