微信小程序按照数据中某个相同数据进行分类显示

首先放效果图:

微信小程序按照数据中某个相同数据进行分类显示_第1张图片

我呢是按照数据中的班级名称进行分类,使用了一个for循环,把数据进行分类,在保存到data中,再在前台进行渲染;

好,废话不多说了,下面直接放代码了

index.wxml


	
		
			{{index}}
			
				
					
						
							
							{{row.coursename}}
							{{row.ccid}}
						
					
				
			
		
	

index.wxss

.page_bd{
  margin-top: 20px;
}
.weui-cell{
  width: 100%;
  padding: 5px 16px 5px 16px!important;
}
.header{
  padding-left: 16px;
  margin-top: 15px;
}
.data{
  display: flex;
  justify-content: space-between;
}
.data image{
  width: 35px;
  height: 35px;
}
.classname{
  font-size: 16px;
  position: absolute;
  top:10px;
  left: 60px;
  display: inline-block;
}

index.js

Page({
  data: {
    banji: [{
      'classid': 1,
      'classname': '18级PHP班',
      'coursename':'HTML',
      'state': 0,
      'createtime': '2020-4-8'
    },
    {
      'classid': 2,
      'classname': '18级JAVA班',
      'coursename':'Python',
      'state': 0,
      'createtime': '2020-4-7'
    },
    {
      'classid': 3,
      'classname': '18级VR班',
      'coursename':'微信小程序',
      'state': 0,
      'createtime': '2020-4-9'
    },{
      'classid': 4,
      'classname': '18级PHP班',
      'coursename':'wordpress',
      'state': 0,
      'createtime': '2020-4-8'
    },{
      'classid': 5,
      'classname': '18级VR班',
      'coursename':'3D动画',
      'state': 0,
      'createtime': '2020-4-8'
    },],
  },
  onLoad:function(options){
    var classinfo = this.data.banji
    var new_classinfo = {}
    for (let i in classinfo) {
      let classname = classinfo[i].classname
      if (new_classinfo[classname] == undefined) {
        new_classinfo[classname] = [classinfo[i]]
      } else {
        new_classinfo[classname].push(classinfo[i])
      }
    }
    this.setData({
      banji: new_classinfo
    })
  }
})

index.json

{
  "usingComponents": {
    "mp-cells": "/weui/cells/cells",
    "mp-cell": "/weui/cell/cell"
  }
}

以上就是如何对数据中某个相同数据进行分类。。。。

你可能感兴趣的:(微信小程序)