– 君看蕙风来处

TP6 无限极导航栏菜单

2021年12月05日 10时23分

#### 一、前言

------------

导航栏是博客网站必不可少的内容，内容都追求一个优雅实用性，本文章介绍如何简单优雅的实现无限极分类导航栏。

（说是无限极，其实博客网站 一般两级就够用了。）

#### 二、数据库设计

------------
![数据库设计](/storage/images/20211205/e14be01f24685ade4443aa0ad43e9ce0.png "数据库设计")

#### 二、递归代码

------------

原理：先查出所有导航菜单数据，然后根据其父级id（$val.pid）和 级别id（$pid）来进行遍历筛选，并且逐步增加级别id（$pid）来反复查询，将查出来的儿子存放到父亲怀里。最后把这些数据放到一个新数组里

use app\index\model\Cat as modelCat;
	
    public function __construct()
	{
		//导航栏数据查询
		$data = modelCat::where('state', '1')->order('sort', 'desc')->select()->toarray();
		//调用递归方法
		$list = $this->navs($data);
		//渲染到前端 使用assign方法进行全局模板变量赋值
		view::assign(['list' => $list,]);
	}
	
	public function navs(array $data, $pid = 0)
    {
		//定义一个空数组，用来存放递归后的数据
        $list = [];
		//遍历导航栏数据
        foreach ($data as $val) {
			//如果遍历的$val['pid'] 等于 $pid
            if ($val['pid'] == $pid) {
				//自己调用自己，把递归出来的数据存入数组中的一个新的键
                $val['child'] = $this->navs($data, $val['id']);
				//把所有数据存入新的数组中
                $list[] = $val;
            }
        }
		//循环结束，返回$list
        return $list;
    }

数据如下：

![递归后的数据](/storage/images/20211205/a6d2a41e39d491bd11e899ec42ab724c.png "递归后的数据")
#### 三、前端渲染变量

------------
大致格式如下：（这是去掉样式标签的数据，可以套在自己的菜单栏标签中）

因为我的博客菜单就两级，先遍历出父亲，再遍历出儿子

{volist name="list" id="list"}
		{$list.catname}
		{volist name="list.child" id="vo"}
			{$vo.catname}
		{/volist}
	{/volist}

作者：君看蕙风来处

链接：https://puuluu.com/b/15

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。本文为原创文章，版权归莞尔博客所有，欢迎分享本文，转载请附上原文作者、出处链接及本声明。