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

现实代码

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

        <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的实现代码，很简单就不上传了！

微信小程序之实现分类显示数据相关推荐

java小程序显示多种按钮_微信小程序多行文本显示...+显示更多按钮和收起更多按钮功能...
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多收起 wxss .box ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
关于微信小程序云开发数据库中有数据查询不到的问题
最近在学习过程中遇到一个微信小程序云开发数据库中有数据查询不到的问题集合查询代码如下: Page({/* 采用了ES6的写法 */onLoad() {wx.cloud.database().coll ...
微信小程序如何访问服务器上的数据？
微信小程序如何访问服务器上的数据? 1.开通腾讯云 · 2.关联账户关联腾讯云账号与微信公众号平台账号.前往关联账号时,请选择微信公众号.错误关联账号请在腾讯云账号中心重新绑定. 已关联账号 ...

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

现实代码

微信小程序之实现分类显示数据相关推荐

最新文章

热门文章