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

一时失言乱红尘 2023-05-22 22:37 20阅读 0赞

首先放效果图：

![分类显示的效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5NTIwMw_size_16_color_FFFFFF_t_70]

我呢是按照数据中的班级名称进行分类，使用了一个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"
      }
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5NTIwMw_size_16_color_FFFFFF_t_70]: /images/20230521/fae8eb9b2fab48bbbb6907ea1770e2ab.png