Enlace de tres niveles de mini programas para lograr una clasificación de tres niveles, barra de navegación superior, barra de clasificación izquierda, lista de datos derecha

Si ha estado leyendo los artículos de Brother Stone o ha visto los videos de Brother Stone, debe saber que el subprograma de pedidos de Brother Stone puede lograr una clasificación de productos o platos de segundo nivel.

Como se muestra en la figura a continuación,

pero a veces queremos lograr una clasificación de tres niveles, qué debemos hacer, hoy te enseñaré cómo lograr una clasificación de tres niveles. Siéntase libre de enseñarle cómo importar datos de Excel en la base de datos de desarrollo en la nube en lotes

Primero, las viejas reglas, primero mira las representaciones

Primero analicemos el principio para todos

En segundo lugar, el análisis de principios

Primero

, analicemos los tres niveles . Podemos ver que tenemos el menú del primer nivel en la parte superior, el menú del segundo nivel a la izquierda y la lista final de tres niveles a la derecha.

Manejemos la relación jerárquica

• = Número de edificio de dormitorios
• ==== Número de dormitorio
• ======== Estudiantes

Las personas inteligentes deben saber que somos un dormitorio con muchos dormitorios y que hay muchos estudiantes en el dormitorio. De esta manera, nuestro tercer nivel es el número de edificio "dormitorio" para estudiantes.

Cuando cambiemos el número de edificio, recuperaremos los dormitorios contenidos en el número de edificio actual.
Por ejemplo, en la imagen de abajo, la izquierda es el edificio Huilan y la derecha son los datos del edificio Xueyuan. Puede ver la información de los estudiantes y el dormitorio en cada edificio.

Después de analizar el principio, veamos la realización técnica.

Tres, obtener datos de clasificación

Déjame decirte primero. Yo uso una tabla para almacenar toda la información.

Dado que es una tabla para almacenar todos los datos, necesitamos agrupar para ver qué números de edificio hay en los datos.

3-1, darse cuenta de la agrupación de números de edificio con la ayuda del grupo (datos de primer nivel)

El código específico es el siguiente

Entonces los datos obtenidos son los siguientes,

podemos ver que tenemos un total de 11 edificios de dormitorios. ¿Están estas áreas encima de nosotros?

3-2, Realice la agrupación de dormitorios con la ayuda de grupo y emparejamiento (datos de segundo nivel)

En este momento, tenemos que agrupar todos los datos bajo el número de edificio actual de acuerdo con el número de edificio seleccionado por el usuario. Los

datos agrupados

se pueden ver de la siguiente manera . Hay dos dormitorios en el Edificio Qianjin.

3-3, Obtenga datos de los estudiantes en el dormitorio con la ayuda de where (Nivel 3)

Los datos obtenidos son los siguientes, por lo que

aquí se realiza nuestra clasificación de tres niveles

Cuarto, el código completo del proyecto.

Ahora publique el código del proyecto completo para todos

4-1 ， wxml

<!-- 导航栏 -->
<scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx">
  <view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}">
    <view class="nav-text {{index==tabCur?'tab-on':''}}">{{item._id}}</view>
  </view>
</scroll-view>
<view class="container">
  <!-- 左边的  -->
  <scroll-view class='nav_left' scroll-y='true'>
    <block wx:for="{{lefts}}" wx:key="{{index}}">
      <view class="nav_left_items {{leftCur==index?'active':''}}" bindtap="switchLeftTab" data-index='{{index}}'>
        {{item._id}}</view>
    </block>
  </scroll-view>
  <!-- 右边的 -->
  <scroll-view class="nav_right" scroll-y="true">
    <view class="{{topx}}">
      <block wx:for="{{rights}}" wx:key="index">
        <view class="nav_right_items" data-id="{{item._id}}">
          <image src="{{item.touxiang}}"></image>
          <text>{{item.mingzi}}</text>
        </view>
      </block>
    </view>
  </scroll-view>
</view>

4-2, estilo wxss

/* 导航栏布局相关 */
.navbar {
    width: 100%;
    height: 90rpx;
    /* 文本不换行 */
    white-space: nowrap;
    display: flex;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
    background: #fff;
    align-items: center;
    /* 固定在顶部 */
    position: fixed;
    left: 0rpx;
    top: 0rpx;
}

.nav-item {
    padding-left: 25rpx;
    padding-right: 25rpx;
    height: 100%;
    display: inline-block;
    /* 普通文字大小 */
    font-size: 28rpx;
}

.nav-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 4rpx;
    box-sizing: border-box;
}

.tab-on {
    color: #000080;
    /* 选中放大 */
    font-size: 38rpx !important;
    font-weight: 600;
    border-bottom: 4rpx solid #000080 !important;
}

/* 正文部分 */
.container {
    position: fixed;
    width: 100%;
    height: 90%;
    top: 100rpx;
    background-color: #FFF;
}

.nav_left {
    width: 25%;
    height: 100%;
    background: #F2F2F2;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

.nav_left .nav_left_items {
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
}

.nav_left .nav_left_items.active {
    position: relative;
    background: #FFF;
    color: #000080;
}

.nav_left .nav_left_items.active::before {
    display: inline-block;
    width: 6rpx;
    height: 60rpx;
    background: #000080;
    content: '';
    position: absolute;
    top: 20rpx;
    left: 0;
}

.nav_right {
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    height: 100%;
}

.nav_right .nav_right_items {
    float: left;
    width: 33.33%;
    text-align: center;
    padding: 30rpx 0;
}

.nav_right .nav_right_items image {
    width: 120rpx;
    height: 160rpx;
}

.nav_right .nav_right_items text {
    display: block;
    margin-top: 20rpx;
    font-size: 28rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nocate {
    padding: 100rpx;
    text-align: center;
}

.nocate image {
    width: 70rpx;
    height: 70rpx;
}

.nocate text {
    font-size: 28rpx;
    display: block;
    color: #BBB;
}

/*隐藏滚动条*/
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.topx {
    width: 90%;
    /* height: 700rpx; */
    margin: 30rpx auto;
    z-index: 1;
    border-radius: 10rpx;
    background-size: cover;
}

4-3, js implementa la lógica de clasificación

const db = wx.cloud.database()
const $ = db.command.aggregate
Page({
    data: {
        tabs: [],
        tabCur: 0, //默认选中
        lefts: [],
        leftCur: 0,
        rights: [],

    },
    onLoad: function (options) {
        db.collection('demo').aggregate()
            .group({
                _id: '$louhao'
            })
            .end()
            .then(res => {
                console.log('楼号列表', res)
                this.setData({
                    tabs: res.list
                })
                this.sushehao(res.list[0]._id)
            })
    },
    //加载当前楼号所有的宿舍号
    sushehao() {
        let louhao = this.data.tabs[this.data.tabCur]._id
        db.collection('demo').aggregate()
            .match({
                louhao
            })
            .group({
                _id: '$sushe'
            })
            .sort({
                sushe: -1 //宿舍号升序排列
            })
            .end()
            .then(res => {
                console.log(louhao + '宿舍号列表', res)
                this.setData({
                    lefts: res.list
                })
                this.xuesheng()
            })
    },
    //加载当前宿舍号里所有的学生
    xuesheng() {
        let louhao = this.data.tabs[this.data.tabCur]._id
        let sushe = this.data.lefts[this.data.leftCur]._id
        db.collection('demo')
            .where({
                louhao,
                sushe
            }).get()
            .then(res => {
                console.log(louhao + sushe + '室学生列表', res)
                this.setData({
                    rights: res.data
                })
            })
    },
    //顶部选择分类条目
    tabSelect(e) {
        this.setData({
            tabCur: e.currentTarget.dataset.id,
            scrollLeft: (e.currentTarget.dataset.id - 2) * 200
        }, success => {
            this.sushehao()
        })
    },
    //左侧条目选择
    switchLeftTab(e) {
        let index = e.target.dataset.index;
        this.setData({
            leftCur: index,
        }, success => {
            this.xuesheng()
        })
    },
})

4-4, recuerde modificar los permisos de la tabla de datos

Modifique los permisos de lectura para todos los usuarios, cree solo aquellos que puedan leer y escribir

aquí para completar nuestra clasificación de tres niveles lograda. Con respecto a la importación por lotes de datos de Excel, lo explicaré en la siguiente sección. Bienvenido a prestar atención, bienvenido a dejar un mensaje para intercambiar.