微信小程序之实现分类显示数据

小程序二级目录实现，实现二级子菜单，链接服务器数据显示

现实代码

index.js
var app = getApp()
var util = require("…/…/utils/util.js");
Page({

/**

• 页面的初始数据
  */
  data: {
  curNav: 1,
  curIndex: 0,
  //右边的view
  itemPage: [],
  //左边的导航view
  item: [],
  //全部分类
  list: []
  },
  onLoad: function(options) {
  var that = this;
  util.getTitle(function(data){
  that.setData({
  list: data,
  })
  var item = util.getItemList(that.data.list, 0);
  that.setData({
  item: item
  })
  })

},
//事件处理函数
switchRightTab: function(e) {
//点的第几个item
let id = e.target.dataset.id;
var index = e.target.dataset.index;
//点击后的分类Javabean
var item = this.data.item[index];
//点击到哪一项，设置为当前的页面
this.setData({
curNav: id,
curIndex: index
})
//下级分类集合
var items = util.getItemList(this.data.list, item.id)
if (items.length <= 0) {
var that = this;
util.getAllGoods(function(data){
var goods = data.rows;
for(var i =0;i<goods.length;i++){
goods[i].pict = util.getImageUrl(goods[i].pict)
}

      that.setData({
        itemPage: goods,
      })
    })
} else {

  //设置数据
  this.setData({
    itemPage: items
  })
}
// // 获取item项的id，和数组的下标值  
//  var id = e.currentTar.dataset.id,
//   index = parseInt(e.target.dataset.index);
// // 把点击到的某一项，设为当前index  
// this.setData({
//   curNav: id,
//   curIndex: index
// })

}
})
index.wxml

{{item.name}}

        <image src="{{item.pict}}"></image>
        <text>{{item.name}}</text>
     
    </view>
  </block>
</view>
<!--如果无数据，则显示数据-->
<view class="nodata_text" wx:else>该分类暂无数据</view>

index.wxss page{ background: #f5f5f5; } /*总体主盒子*/ .container { position: absolute; width: 100%; height: 100%; background-color: #fff; color: #939393;

}
/左侧栏主盒子/
.nav_left{
/设置行内块级元素（没使用定位）/
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
/主盒子设置背景色为灰色/
background: #f5f5f5;
text-align: center;
}
/左侧栏list的item/
.nav_left .nav_left_items{
/每个高30px/
height: 40px;
/垂直居中/
line-height: 40px;
/再设上下padding增加高度，总高42px/

/只设下边线/
border-bottom: 1px solid #dedede;
/文字14px/
font-size: 10px;
}
/左侧栏list的item被选中时/
.nav_left .nav_left_items.active{
/背景色变成白色/
background: white;
color: #f0145a;
}
/右侧栏主盒子/
.nav_right{
/右侧盒子使用了绝对定位
/ */
position: absolute;
top: 0;
right: 0;
flex: 1;
/宽度75%，高度占满，并使用百分比布局/
width: 75%;
height: 1000px;
padding: 10px;
box-sizing: border-box;
background: #fff;
}
/右侧栏list的item/
.nav_right .nav_right_items{
/浮动向左/
float: left;
/每个item设置宽度是33.33%/
width: 33.33%;
height: 120px;
text-align: center;
}
.nav_right .nav_right_items image{
/被图片设置宽高/
width: 60px;
height: 60px;
margin-top: 15px;
}
.nav_right .nav_right_items text{
/给text设成块级元素/
display: block;
margin-top: 15px;
font-size: 14px;
color: black;
/设置文字溢出部分为…/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nodata_text
{
color: black;
font-size: 14px;
text-align: center;
}

以及util的实现代码，很简单就不上传了！