在商场项目中，一般都会有分类页面。
分类页面可以给用户快速找到相关的商品，下面以侧栏分类为例，如下图
布局分析：
左盒子>
右盒子>
主盒子>
左盒子使用标准流
右盒子使用绝对定位（top、right）
wxml：
<code><
view
class
="container"
><
view
class
="nav_left"
><
block
wx:for
="{{navLeftItems}}"
><
view
class
="nav_left_items {{curNav == item.id ? 'active' : ''}}"
bindtap
="switchRightTab"
data-index
="{{index}}"
data-id
="{{item.id}}"
>{{item.tree.desc}}view
>block
>view
><
view
class
="nav_right"
><
view
wx:if
="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}"
><
block
wx:for
="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}"
><
view
class
="nav_right_items"
><
navigator
url
="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}"
><
view
><
block
wx:if
="{{item.tree.logo}}"
><
image
src
="{{item.tree.logo}}"
>image
>block
><
block
wx:else
><
image
src
="http://temp.im/50x30"
>image
>block
>view
><
view
wx:if
="{{item.tree.desc}}"
><
text
>{{item.tree.desc}}text
>view
><
view
wx:else
><
text
>{{item.tree.desc2}}text
>view
>navigator
>view
>block
>view
><
view
wx:else
>暂无数据view
>view
>view
> /<code>
wxss：
<code>page
{background
:#f5f5f5
; }.container
{position
: relative;width
:100%
;height
:100%
;background-color
:#fff
;color
:#939393
; }.nav_left
{display
: inline-block;width
:25%
;height
:100%
;background
:#f5f5f5
;text-align
: center; }.nav_left
.nav_left_items
{height
:30px
;line-height
:30px
;padding
:6px
0
;border-bottom
:1px
solid#dedede
;font-size
:14px
; }.nav_left
.nav_left_items
.active
{background
:#fff
; }.nav_right
{position
: absolute;top
:0
;right
:0
;flex
:1
;width
:75%
;height
:100%
;padding
:10px
;box-sizing
: border-box;background
:#fff
; }.nav_right
.nav_right_items
{float
: left;width
:33.33%
;height
:80px
;text-align
: center; }.nav_right
.nav_right_items
image
{width
:50px
;height
:30px
; }.nav_right
.nav_right_items
text
{display
: block;margin-top
:5px
;font-size
:10px
;overflow
: hidden;white-space
: nowrap;text-overflow
: ellipsis; } /<code>
js：
<code>Page({
data
: {
navLeftItems
: [],
navRightItems
: [],
curNav
: 1
,
curIndex
: 0
},
onLoad
: function
() {
var
that = this
wx.request({
url
: 'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList'
,
method
: 'GET'
,
data
: {},
header
: {
'Accept'
: 'application/json'
},
success
: function
(res
) {
console
.log(res)
that.setData({
navLeftItems
: res.data,
navRightItems
: res.data
})
}
})
},
switchRightTab
: function
(e
) {
let
id = e.target.dataset.id,
index = parseInt
(e.target.dataset.index);
this
.setData({
curNav
: id,
curIndex
: index
})
}
})
/<code>
