效果图如下：
1750086-80e483b9d419fe6b.gif
参照的是https://blog.csdn.net/u012927188/article/details/73650264这篇文章，但他用的并非是flex布局，今天我用flex布局实现他的效果。
Flex布局的概念
flex布局类似Android中的相对布局RelativeLayout，采用Flex布局的元素，称为Flex容器（flex container）。它的所有子元素自动成为容器成员，称为Flex项目（flex item）。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
image.png
关于flex布局详细资料可以参考http://www.runoob.com/w3cnote/flex-grammar.html
Flex布局的使用
常用的标签有：
display: flex; //声明容器为flex布局
flex-direction: row; //容器内元素的排列方向.row为沿水平轴排列,column为沿垂直轴排列
justify-content: center; //容器内元素在水平轴上的排列方式,center为居中，默认值flex-start(左对齐)
align-items: center; //容器内元素在垂直轴上的排列方式,center为居中，默认值stretch
接下来正式实现效果图的效果
wxml：
<view class="container">
// 左侧
<view class="nav_left">
<block wx:for="{{level}}">
<view class="nav_left_item {{current == item.cate_id ? 'active' : ''}}"
data-index='{{index}}' data-id='{{item.cate_id}}' bindtap='onClick'>{{item.cate_name}}</view>
</block>
</view>
//右侧
<view class="nav_right">
<view class="nav_right_container" wx:if="{{level[index].ishaveChild}}">
<block wx:for="{{level[index].children}}">
<view class="nav_right_item">
<image class='image' src="{{item.image}}"></image>
<text class='text'>{{item.name}}</text>
</view>
</block>
</view>
<view wx:else>该类暂无数据</view>
</view>
</view>
wxss:
.container{
width:100%;
height:100%;
display: flex;
flex-direction: row;
padding: 0 0 ; //为什么默认上下有200rpx的padding？？？望高人解答
align-items: flex-start;
}
.nav_left{
width : 25%;
height: 100%;
background: #f5f5f5;
}
.nav_left_item {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 42px;
border-bottom: 1px solid #dedede;
font-size: 14px;
}
.active {
background: #00ff00;
}
.nav_right {
width:75%;
}
.nav_right_container {
width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.nav_right_item{
width: 33.33%;
height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10rpx 0;
}
.image {
width: 50%;
height: 50%;
}
.text {
width: 100%;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
// navLeft:["宝宝奶粉", "纸尿裤","辅食营养","母婴专区","护肤美体","营养保健","居家日用","进口美食","轻奢女装","秒杀特惠清仓","时尚箱包","专场大促","汽车用品","美容护肤","电器手机","生活家居","服饰鞋子","还有什么","没有了吧",]
level:[
{
cate_id: 1,
cate_name: "护肤",
ishaveChild: true,
children:
[
{
child_id: 1,
name: '洁面皂',
image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"
},
{
child_id: 2,
name: '卸妆',
image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"
},
{
child_id: 3,
name: '洁面乳',
image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"
},
{
child_id: 4,
name: '面部祛角质',
image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
}
]
},
{
cate_id: 2,
cate_name: "彩妆",
ishaveChild: true,
children:
[
{
child_id: 1,
name: '气垫bb',
image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381301.jpg"
},
{
child_id: 2,
name: '修容/高光',
image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381411.jpg"
},
{
child_id: 3,
name: '遮瑕',
image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815181.jpg"
},
{
child_id: 4,
name: '腮红',
image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815759.jpg"
},
{
child_id: 5,
name: '粉饼',
image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153816983.jpg"
},
{
child_id: 6,
name: '粉底',
image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153817721.jpg"
},
{
child_id: 7,
name: '蜜粉/散粉',
image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153819354.jpg"
},
{
child_id: 8,
name: '隔离霜',
image: "http://mz.djmall.xmisp.cn/files/logo/20161215/148179053369.jpg"
}
]
},
{
cate_id: 3,
cate_name: "香水/香氛",
ishaveChild: true,
children:
[
{
child_id: 1,
name: '淡香水EDT',
image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815978910.jpg"
},
{
child_id: 2,
name: '浓香水EDP',
image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159789883.jpg"
},
{
child_id: 3,
name: '香体走珠',
image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815979307.jpg"
},
{
child_id: 4,
name: '古龙香水男士的最爱',
image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159765589.jpg"
}
]
},
{
cate_id: 4,
cate_name: "个人护理",
ishaveChild: false,
children: []
}
],
current : 1, //当前选中的cate_id
index : 0 // 当前选中的index
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
onClick: function(e) {
console.log(e)
this.setData({
current:e.target.dataset.id,
index:e.target.dataset.index
})
}
})
网友评论