-
[置顶]软件接口设计怎么做？前后端分离软件接口设计思路
本文关于软件接口设计怎么做？前后端分离软件接口设计思路。好的系统架构离不开好的接口设计，因此，真正懂接口设计的人往往是软件设计队伍中的稀缺型人才。为什么在接口制定标准中说：一流的企业做标准，二流的企业...
-
[置顶]接口管理如何做？接口实现版本管理的意义和最佳方法
本文关于接口管理如何做？接口实现版本管理的意义和最佳方法。API版本管理的重要性不言而喻，对于API的设计者和使用者而言，版本管理都有着非常重要的意义。下面会从WEB API 版本管理的角度提供几种常...
-
[置顶]实现API管理系统的关键
下面将通过几个关键词的形式说明API管理的重要性和未来的实现方式。1.生命周期管理在整个API生命周期中更深入地集成所有工具将进一步提高生命周期循环的速度，而且更重要的是提供满足消费者需求的API。这...
-
微信小程序教程系列之新建页面（4）
微信小程序教程系列之新建页面（4）例如在web的开发中，新建一个页面只需要新建一个html文件即可。但是到在微信小程序中，新建一个页面也不只是新建一个wxml文件，那么该如何做呢？下面我们一起来学习新...
-
-
{{menu.descs[index]}} wxss：
.menu-wrp {
width:100%;
margin-top:20rpx;
}
.menu-wrp:after{
content:"";
display:block;
clear:both;
}
.menu-list{
float:left;
widthttp://h:20%;
box-sizing: border-box;
padding-bottom:10px;
}
.menu-img{
width:120rpx;
height:84rpx;
display:block;
margin:0 auto;
margin-bottom:5px;
}
.menu-http://desc{
background-color:#ffffff;
color:#333333;
width:100%;
text-align: center;
display:block;
font-size:12px;
}
.gap-1,.gap-2{
width:100%;
height:10rpx;
background:rgb(238, 238, 238);
}
js：
这里的准备的数据，我直接写在js中，同学们可以改编成通过访问接口来获取
Page({
data: {
//准备数据
menu:{
imgUrls:[
'http://gw.alicdn.com/tps/i2/TB19BluIVXXXXX6XpXXN4ls0XXX-183-129.png?imgtag=avatar',
'http://gw.alicdn.com/tps/TB1FDOHLVXXXXcZXFXXXXXXXXXX-183-129.png?imgtag=avatar',
'http://gw.alicdn.com/tps/TB1PlmNLVXXXXXEXFXXXXXXXXXX-183-129.png?imgtag=avatar',
'http://gw.alicdn.com/tps/TB1RN0HMFXXXXXNXpXXXXXXXXXX-183-129.png?imgtag=avatar',
'http://gw.alicdn.com/tps/TB1exaOLVXXXXXeXFXXXXXXXXXX-183-129.png?imgtag=avatar',
'http://img.alicdn.com/tps/TB1GzMJLXXXXXXoXXXXXXXXXXXX-183-129.png" alt="微信小程序商城项目之淘宝分类入口（2）" title="微信小程序商城项目之淘宝分类入口（2）" width="200" height="150">
-
-
{{item.tree.desc}} {{item.tree.desc2}} 暂无数据 wxss：
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;
}
/*左侧栏list的item*/
.nav_left .nav_left_items{
/*每个高30px*/
height: 30px;
/*垂直居中*/
line-height: 30px;
/*再设上下padding增加高度，总高42px*/
padding: 6px 0;
/*只设下边线*/
border-bottom: 1px solid #dedede;
/*文字14px*/
font-size: 14px;
}
/*左侧栏list的item被选中时*/
.nav_left .nav_left_items.active{
/*背景色变成白色*/
background: #fff;
}
/*右侧栏主盒子*/
.nav_right{
/*右侧盒子使用了绝对定位*/
position: absolute;
top: 0;
right: 0;
flex: 1;
/*宽度75%，高度占满，并使用百分比布局*/
width: 75%;
height: 100%;
padding: 10px;
box-sizing: border-box;
background: #fff;
}
/*右侧栏list的item*/
.nav_right .nav_right_items{
/*浮动向左*/
float: left;
/*每个item设置宽度是33.33%*/
width: 33.33%;
height: 80px;
text-align: center;
}
.nav_right .nav_right_items image{
/*被图片设置宽高*/
width: 50px;
height: 30px;
}
.nav_right .nav_right_items text{
/*给text设成块级元素*/
display: block;
margin-top: 5px;
font-size: 10px;
/*设置文字溢出部分为...*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
js：
Page({
data: {
navLeftItems: [],
navRightItems: [],
curNav: 1,
curIndex: 0
},
onLoad: function() {
// 加载的使用进行网络访问，把需要的数据设置到data数据对象
var that = this
wx.request({
url: 'http://huanqiuxiaozhen.com/weHLoHtXqVmall/goodstype/typebrandList',
method: 'GET',
data: {},
header: {
'Accept': 'application/json" alt="微信小程序商城项目之侧栏分类效果（1）" title="微信小程序商城项目之侧栏分类效果（1）" width="200" height="150">
-
-
-
-
-
