微信小程式之實作分類顯示資料

小程式二級目錄實作，實作二級子菜單，連結伺服器資料顯示

現實代碼

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的實作代碼，很簡單就不上傳了！