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

首先放效果图：

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

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

index.wxml

<view class="page">
	<view class="page_bd">
		<block wx:for="{{banji}}" wx:key="{{item.id}}">
			<view class="header">{{index}}</view>
			<block wx:for="{{banji[index]}}" wx:for-item="row">
				<view class="row">
					<mp-cells>
						<mp-cell class="data item" data-id="{{row.ccid}}" bindtap="row_tap">
							<image src="/images/icon.jpg" class="classimg"></image>
							<view class="classname">{{row.coursename}}</view>
							<view slot="footer">{{row.ccid}}</view>
						</mp-cell>
					</mp-cells>
				</view>
			</block>
		</block>
	</view>
</view>

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"
  }
}

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