TP5+微信小程序通过无限分类实现分类功能

TP5步骤如下：
Model：新建一个Cate.php，内容如下：

<?php
namespace app\admin\model;
use think\Model;
class Cate extends Model
{
    // 无限分类
    public function cateTree()
    {
        $cateRes = self::order('sort desc')->select();
        return $this->_sort($cateRes);
    }

    private function _sort($cateRes,$pid = 0,$level = 0 )
    {
        static $arr = array();
        foreach($cateRes as $k=>$v)
        {
            if($v['pid'] == $pid){
                $v['level'] = $level;
                $arr[] = $v;
                $this->_sort($cateRes,$v['id'],$level+1);
            }
        }
        return $arr;
    }

    // 获取子目录
    /**
     * $id 当前id
     */
    public function getChildren($id)
    {
        $data = self::select();
        return $this->_getChildren($data,$id);

    }
    private function _getChildren($data,$id)
    {
        $data = self::select();
        static $arr = array();
        foreach($data as $k=>$v)
        {
            if($v['pid'] == $id){
                $arr[] = $v['id'];
                $this->_getChildren($data,$v['id']);
            }
        }
        return $arr;

    }
}

控制器层：

<?php
namespace app\admin\controller;
use think\Controller;
use think\Request;

class Cate extends Controller
{
    public function index()
    {
        return view('cate/list');
    }

    public function add()
    {
        $cateRes = model('cate')->cateTree();
        $this->assign('cateRes',$cateRes);
        if(request()->isAjax()){
            $data = Request::instance()->param();
            unset($data['file']);
            $add = db('cate')->insert($data);
            if($add){
                return json(['code'=>200,'msg'=>'操作成功']);
            }else{
                return json(['code'=>502,'msg'=>'操作失败']);
            }
            return;
        }
        return view('cate/add');
    }

    public function edit()
    {
        $id = input('id');
        $cateres = db('cate')->where('id',$id)->find();
        $this->assign('cateres', $cateres);
        $cateRes = model('cate')->cateTree();
        $this->assign('cateRes',$cateRes);
        if(request()->isAjax()){
            $data = Request::instance()->param();
            unset($data['file']);
            $edit = db('cate')->where('id',$data['id'])->update($data);
            if($edit !== false){
                return json(['code'=>200,'msg'=>'操作成功']);
            }else{
                return json(['code'=>502,'msg'=>'操作失败']);
            }
            return;
        }
        return view('cate/edit');
    }

    public function del($id)
    {
        if(request()->isAjax()){
            $sonIds = array();
            $sonIds = model('cate')->getChildren($id);
            $sonIds[] = intval($id);
            // 循环删除
            foreach ($sonIds as $k => $v) {
                $cates = db('cate')->field('thumb')->find($v);
                $thumbSrc = COURSE_IMG.$cates['thumb'];
                if(file_exists($thumbSrc)){
                    @unlink($thumbSrc);
                }
                db('cate')->delete($v);
            }
            return json(['code'=>200,'msg'=>'操作成功']);
        }
    }
    public function listJson()
    {
        $data=Request::instance()->param();//用接收各种类型的数据函数
        if($data){
            $page=$data['page'];
            $limit=$data['limit'];
        }else{
            $page=1;
            $limit=10;
        }
        $info = model('cate')->cateTree();
        foreach($info as $k=>$v){
            if($v['pid'] == 0){
                $info[$k]['cate_name'] = $v['cate_name'];
            }else{
                $info[$k]['cate_name'] = '|'.str_repeat('-',$v['level']*8).$v['cate_name'];
            }
        }
        $count = count(db('cate')->select());
        return json(['code'=>200,'count'=>$count,'info'=>$info,'msg'=>'数据调取成功']);
    }
}

微信小程序步骤如下：
wxml

<!--pages/cate/cate.wxml-->
<view class="cate">
  <view class="cate-left">
    <scroll-view scroll-y="true">
      <block wx:for="{{ topCate }}">
        <view bindtap="changeTab" data-id="{{ item.id }}" class="navitem {{ item.id == cateId ? 'current' : '' }}">{{ item.cate_name }}</view>
      </block>
    </scroll-view>
  </view>

  <view class="cate-right">
      <image class='cate-banner' mode='widthFix' src='{{ cates.thumb }}'></image> 
      <scroll-view scroll-y="true">
        <view class="cate-label">{{ cates.cate_name }}</view>
        <view class="cate-list">
          <view class="cate-item" wx:for="{{ sonCates }}">
              <image class="cate-img" mode="widthFix" src="{{ item.thumb }}" style=""></image>
              <text class="cate-name">{{ item.cate_name }}</text>
          </view>
        </view>
      </scroll-view>

  </view> 
</view>

wxss

/* pages/cate/cate.wxss */
.cate{width:100%;height:100%;display: flex;}
.cate .cate-left{width:25%;height:100%;border-right:1rpx solid #e3e3e3;}
.cate .cate-left .navitem{text-align: center;padding:30rpx 0;font-size:32rpx;}
.cate .cate-left .current{border-left:6rpx solid #ff9801;color:#ff9801;}
.cate .cate-right{width:75%;padding:20rpx;}
.cate .cate-right .cate-banner{width:100%;}
.cate .cate-right .cate-label{text-align: left;border-bottom:1rpx solid #ccc;padding-bottom:10rpx;margin:20rpx 0;}
.cate-list{display: flex;flex-wrap: wrap;}
.cate-list .cate-item{width: 30%;margin:20rpx 8rpx;text-align: center;}
.cate-list .cate-item .cate-name{font-size: 28rpx;}
.cate-list .cate-item .cate-img{width:68px;height:68px;border:1px solid #e3e3e3}

js

//页面初始数据
data: {
    // 所有栏目数据 二维数组
    topCate:[],
    // 当前栏目数据 一维数组
    cates:[],
    // 二级栏目 多维数组
    sonCates:[],
    // 初始id
    cateId:12
  }

// 请求顶级分类接口
  topCate: function () {
    var _this = this;
    var cateId = this.data.cateId;
    wx.request({
      url: config.topCate,
      success(res) {
        console.log('顶级栏目',res.data);
        _this.setData({
          topCate: res.data
        })
      }
    })
// 请求当前栏目数据
    wx.request({
      url: config.cateFind + cateId,
      success(res) {
        console.log('当前栏目数据：',res.data);
        _this.setData({
          cates: res.data
        })
      }
    })
// 获取对应的二级子栏目
    wx.request({
      url: config.get_son_cate + cateId,
      success(res) {
        console.log('二级子栏目', res.data);
        _this.setData({
          sonCates: res.data
        })
      }
    })
  }

// 切换顶级栏目高亮状态并获取所对应的栏目数据
  changeTab:function(e){
    var _this = this;
    var curId = e.target.dataset.id;
    _this.setData({ cateId:curId});
    var cateId = this.data.cateId;
    // 请求当前栏目数据
    wx.request({
      url: config.cateFind + cateId,
      success(res) {
        _this.setData({
          cates: res.data
        })
      }
    })
    // 获取对应的二级子栏目
    wx.request({
      url: config.get_son_cate + cateId,
      success(res) {
        _this.setData({
          sonCates: res.data
        })
      }
    })
  }

//页面加载后执行
  onLoad: function (options) {
  //调取分类
    this.topCate();
  }