微信小程序三级分类

今天，在做一个电商小程序的分类页面，要实现三级分类。首先，先上图。

要完成这样一个功能，前端的界面就不说了，具体说说怎么实现的吧，说复杂也挺复杂的，说简单只要会了思路就不难了。其实思路就是先在数据库中设计一个关于分类的数据表，数据表如下，因为本人java学的很烂，所以用的云开发，云数据库。先创建一张category表，如下图

 上代码，页面布局：

<view class="container">
    <view class="search-header">
        <navigator url="/pages/search/search">
            <view class="search-input-wrap">
                <image src="../../../images/search_icon.png" class="search-icon" mode="scaleToFill"/>
                <input type="text" class="input" placeholder="搜索商品" />
            </view>
        </navigator>
    </view>
    <view class="cate-box">
        <view class="cate-parent"> 
            <block wx:for="{{cate}}">
                <view class="cate-parent-item">
                    {{item.cateName}}
                </view>
            </block>
        </view>
        <view class="cate-child">
            <view class="cate-child-list" wx:for="{{cate}}">
                <view class="cate-child-item" wx:for="{{item.secondCate}}">
                    <navigator>
                        <view class="icon">
                            <image src="{{item.pic}}" />
                        </view>
                        <view class="txt">{{item.text}}</view>
                    </navigator>
                </view>
            </view>
        </view>
    </view>
</view>

这个里面先遍历左侧的一级分类，从云数据库里获取，一级分类获取到之后，再获取右边的二级分类，二级分类是一个数组，数组里是object对象。遍历二级分类。这样就可以获取到二级分类了。再来看js文件里怎么获取分类的。

const db = wx.cloud.database()
Page({

  /**
   * 页面的初始数据
   */
  data: {
      cate:[],
      secondCate:[]
  },
  getCate(){
      db.collection("category")
      .get()
      .then(res=>{
          this.setData({
            cate:res.data
          })
          console.log("获取数据成功");
      })
      .catch(err=>{
          console.log("获取数据失败",err)
      })

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.getCate()
  },

  /**

这样，一个仿淘宝的二级分类就写完了。后期我会做一个专栏，把我做的这个电商小程序从头到尾的讲解一遍。本人水平有限，望各位大佬轻喷。具体还有很多细节未处理。