#利用小程序的云数据库模拟网络接口数据

小程序云数据库真的很牛，它的数据不限制长度，不限制维度，一条数据可以写成一类数据，就像接口一样。
这里的代码仅供参考，需要源码请到我的博客上下载，免费
由于将数据的结构写成了四层数组，所以一定要有耐心，此文章至少要用一个小时来研究，否则还是不要看，但是看懂了真的益处颇多，你会对数据的获取有一个新的认识，由于网络上还找不到好的数据教程，纯靠自己想。本人研究处这套结构花了三四个小时，写成博客也希望能够帮助一些遇到同样问题的小伙伴。有不明白的地方欢迎私信我。

1. 首先将数据分层级，画出粗略的数据结构图，下面将会以商品分类数据进行示范

2. 结构图
   

   ​ …

3. 在js文件中编写添加数据的Add函数，务必认真看，这里比较复杂，有四层数组。
   

   onADD:function(event){
       kinds.add({
         data:{
           cate:"spring",
           chlidren:[
             ["early_spring",
               [
                 ["image_name1","image_src"],
                 ["image_name2","image_src"],
                 ["image_name3","image_src"],
                 ["image_name4","image_src"],
                 ["image_name5","image_src"],
                 ["image_name6","image_src"],
               ]
             ],
             ["mid_spring",
               [
                 //同上
               ]
             ],
             ["night_spring",
               [
                 //同上
               ]
             ]
           ]
         }
       }).then(res=>{
         console.log(res)
       })
     },

<view class="cates">
  <searchinput></searchinput>
  <view class="cates_container">
    <!-- 左侧商品栏 -->
    <scroll-view class="left_menu" scroll-y="true">
      <!-- “-”是到的意思 "0-1"就是"0到1"
        此处的currentIndex为当前被选中的类别，此变量与js文件进行了数据绑定，
        不仅可以控制左侧导航栏的激活样式，也可以控制右边商品栏的类别获取
        kindsResult有四条数据 分别是 kindsReslut[0]-kindsReslut[3] .cate = spring summer fall winter
        kindsReslut[0-3].image_nameren里面有三个元素分别是 early mid night 和它们的孩子（image_nameren[0][0-1]）
        image_nameren[0][1]里面又有六个元素 0 1 2 3 4 5, 每一个元素里面都有图片名字和图片路径
        拿到元素的方法就是剥离出单条数据，再对其进行渲染
       -->
      <view class="left_item {{index===currentIndex?'active':''}}"
        wx:for="{{kindsResult}}"
        wx:key="id"
        wx:for-item="item"
        wx:for-index="index"
        bindtap="tabLeftItem"
        data-index="{{index}}"
        data-kinds_cate="{{item.cate}}"
      >{{item.cate}}</view>
    </scroll-view>
    <!-- 右侧商品栏 -->
    <scroll-view class="right_content" scroll-top="{{scroll_top}}" scroll-y="true">
      <!-- 此处剥离到了当前被激活组件的孩子数组，其中有三个元素  -->
      <view class="right_item"
        wx:for="{{kindsResult[currentIndex].chlidren}}"
        wx:for-index="index1"
        wx:for-item="item1"
        wx:key="*this"
      >   
        <view class="item_title">
          <text class="delimiter">/</text>
          <text >{{item1[0]}}</text>
          <text class="delimiter">/</text>
        </view>
        <view class="item_list"> 
          <!-- 此处进入到了children数组中，children.[1]元素是一个一维数组，对其进行遍历 -->
          <navigator  wx:for="{{item1[1]}}" 
          wx:for-item="item2"
          wx:for-index="index2"
          wx:key="*this"
          url="../goods_list/goods_list">
          <!-- 
            children.[1][0]是图片名称，
            children.[1][1]是图片路径，
          -->
            <image src="{{item2[1]}}" mode="widthFix"></image>
            <view class="item_name">{{item2[0]}}</view>
          </navigator>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

5. 附上js代码(代码不全，只是让读者明白currentIndex是如何其作用的)

   Page({
     data: {
       kindsResult: null,
       currentIndex: 0,
     },
     //获取对应标签中的数据
     tabLeftItem(event) {
       const {index} = event.currentTarget.dataset
       this.setData({
         currentIndex: index,
       })
     }
   })