树结构排序优化

闫增涛

2024-09-04 bfdd1a936731cf9b5f0d2c78d363cbb0ec93d941

 pages/bookServices/assort/index.wxml

@@ -1,63 +1,78 @@
<!--图书服务分类-->
<view class="page-header">
  <!-- 搜索框 -->
  <view class="search">
    <t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" placeholder="请输入关键词/书名/ISBN/作者" leftIcon="" bind:submit="navToSearchPage" placeholder-style="{{placeholderstyle}}">
      <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
    </t-search>
  </view>
</view>
<import src="index.skeleton.wxml" />
<template is="skeleton" wx:if="{{listLoding}}" />

<view class="page-container">
  <view class="side-bar-wrapper" wx:if="{{!loading}}">
    <view class="tab-left">
      <t-side-bar value="{{assortCheck.code}}" bind:change="changeAssort">
        <t-side-bar-item wx:for="{{assortList}}" wx:key="id" value="{{item.refCode}}" label="{{item.name}}" badge-props="{{item.badgeProps}}" />
      </t-side-bar>
<!--图书服务分类-->
<page-meta style="width: 100vw; overflow: hidden" wx:if="{{!listLoding}}">
  <view class="page-header">
    <!-- 搜索框 -->
    <view class="search">
      <t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" placeholder="请输入关键词/书名/ISBN/作者/项目负责人" leftIcon="" bind:submit="navToSearchPage" placeholder-style="{{placeholderstyle}}">
        <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
      </t-search>
    </view>
    <view class="page-right">
      <!-- 右侧 -->
      <view class="side-bar-content" wx:if="{{!listLoding}}">
        <!-- 一级分类 -->
        <view class="tab-top">
          <scroll-view scroll-x="{{true}}" class="myScroll" show-scrollbar="{{false}}">
            <view wx:for="{{startList}}" wx:key="id" class="row {{startCheck.id == item.id ? 'tab-active' : ''}}" bind:tap="tabClick" data-tabData="{{item}}">{{item.name}}</view>
          </scroll-view>
        </view>
        <!-- 内容 -->
        <scroll-view scroll-y="{{true}}" class="class-list" scroll-into-view="{{ 'list' + startCheck.id}}">
          <view wx:if="{{listLoading}}">
            <t-loading theme="spinner" size="400rpx" loading="{{listLoading}}"></t-loading>
          </view>
          <view wx:for="{{startList}}" wx:for-item="item" wx:key="item.id" id="{{ 'list' + item.id}}" class="class-box" wx:if="{{!listLoading}}">
            <view class="class-name">{{item.name}}</view>
            <view class="class-content">
              <view wx:for="{{item.children}}" wx:for-item="citem" wx:key="id" class="book-box" bind:tap="goPageList" data-stair="{{citem}}" data-tabData="{{item}}" wx:if="{{item.children.length}}">
                <view class="assort-img">
                  <image src="{{citem.icon ? citem.icon : '/static/images/bookService/assort/book-img.png'}}" mode="widthFix" />
                </view>
                <view class="classify">{{citem.name}}</view>
              </view>
              <view wx:if="{{!item.children.length}}" class="book-box" bind:tap="goPageList" data-tabData="{{item}}">
                <view class="assort-img">
                  <image src="{{item.icon ? item.icon : '/static/images/bookService/assort/book-img.png'}}" mode="heightFix"></image>
                </view>
                <text class="classify">全部</text>
              </view>
  </view>

  <view class="page-container">
    <view class="side-bar-wrapper" wx:if="{{!loading}}">
      <view class="tab-left">
        <t-side-bar value="{{assortCheck.code}}" bind:change="changeAssort">
          <t-side-bar-item wx:for="{{assortList}}" wx:key="id" value="{{item.refCode}}" label="{{item.name}}" badge-props="{{item.badgeProps}}" />
        </t-side-bar>
      </view>
      <view class="page-right">
        <!-- 右侧 -->
        <view class="side-bar-content" wx:if="{{!listLoding}}">
          <!-- 一级分类 -->
          <view class="tab-top">
            <view class="myScroll">
              <view wx:for="{{startList}}" wx:key="id" class="row {{startCheck.id == item.id ? 'tab-active' : ''}}" bind:tap="tabClick" data-tabData="{{item}}">{{item.name}}</view>
            </view>
          </view>
          <view class="bottom-box">
          </view>
        </scroll-view>
      </view>
      <!-- loading -->
      <view class="loading-box" wx:if="{{listLoding}}">
        <t-loading theme="circular" size="60rpx" class="wrapper" loading="{{listLoding}}" wx:if="{{listLoding}}" />
          <!-- 内容 -->
          <scroll-view scroll-y="{{true}}" class="class-list" scroll-into-view="{{ 'list' + startCheck.id}}">
            <view wx:for="{{startList}}" wx:for-item="item" wx:key="id" id="{{ 'list' + item.id}}" class="class-box" wx:if="{{!stairListLoading}}">
              <view class="class-name">{{item.name}}</view>
              <view class="class-content">
                <view wx:for="{{item.children}}" wx:for-item="citem" wx:key="id" class="book-box" bind:tap="goPageList" data-stair="{{citem}}" data-tabData="{{item}}" wx:if="{{item.children.length}}">
                  <view class="assort-img">
                    <image src="{{citem.icon ? citem.icon : '/static/images/default-book-img.png'}}" mode="aspectFit" />
                  </view>
                  <view class="classify">{{citem.name}}</view>
                </view>
                <view wx:if="{{!item.children.length}}" class="book-box" bind:tap="goPageList" data-tabData="{{item}}">
                  <view class="assort-img">
                    <image src="{{item.icon ? item.icon : '/static/images/default-book-img.png'}}" mode="aspectFit" />
                  </view>
                  <text class="classify">全部</text>
                </view>
              </view>
            </view>
            <view wx:if="{{stairListLoading}}" style="width: 100%; height: min-content">
              <t-skeleton row-col="{{rowCol}}" theme="paragraph" animation="gradient" loading="{{stairListLoading}}"></t-skeleton>
            </view>
            <view class="bottom-box"> </view>
          </scroll-view>
        </view>
        <!-- loading -->
        <!-- <view class="loading-box" wx:if="{{listLoding}}">
          <t-loading
            theme="circular"
            size="60rpx"
            class="wrapper"
            loading="{{listLoding}}"
            wx:if="{{listLoding}}"
          />
        </view> -->
      </view>
    </view>

    <!-- <view class="loading-box" wx:if="{{loading}}">
      <t-loading
        theme="circular"
        size="60rpx"
        class="wrapper"
        loading="{{loading}}"
        wx:if="{{loading}}"
      />
    </view> -->
  </view>
  <view class="loading-box" wx:if="{{loading}}">
    <t-loading theme="circular" size="60rpx" class="wrapper" loading="{{loading}}" wx:if="{{loading}}" />
  </view>
</view>
</page-meta>