小程序云数据库真的很牛,它的数据不限制长度,不限制维度,一条数据可以写成一类数据,就像接口一样。
这里的代码仅供参考,需要源码请到我的博客上下载,免费
由于将数据的结构写成了四层数组,所以一定要有耐心,此文章至少要用一个小时来研究,否则还是不要看,但是看懂了真的益处颇多,你会对数据的获取有一个新的认识,由于网络上还找不到好的数据教程,纯靠自己想。本人研究处这套结构花了三四个小时,写成博客也希望能够帮助一些遇到同样问题的小伙伴。有不明白的地方欢迎私信我。
-
首先将数据分层级,画出粗略的数据结构图,下面将会以商品分类数据进行示范
-
结构图
…
-
在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>
-
附上js代码(代码不全,只是让读者明白currentIndex是如何其作用的)
Page({ data: { kindsResult: null, currentIndex: 0, }, //获取对应标签中的数据 tabLeftItem(event) { const {index} = event.currentTarget.dataset this.setData({ currentIndex: index, }) } })