优化商品分类滑动方案
gongfuxiang
parent
e1ab77941b
commit
8e3b3ea6bb
|
|
@ -47,8 +47,6 @@
|
|||
.right-container {
|
||||
width: calc(100% - 200rpx);
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #f5f5f5;
|
||||
|
|
|
|||
|
|
@ -116,59 +116,61 @@
|
|||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="right-container pa">
|
||||
<!-- 一级内容基础容 -->
|
||||
<view v-if="(data_content || null) != null" class="padding-top-main padding-horizontal-main">
|
||||
<!-- 一级基础信息 -->
|
||||
<view v-if="(data_content.vice_name || null) != null || (data_content.describe || null) != null" class="one-content bg-white padding-main border-radius-main cp spacing-mb" :data-value="data_content.id" @tap="category_event">
|
||||
<view v-if="(data_content.vice_name || null) != null" class="text-size fw-b" :style="'color:' + data_content.bg_color + ';'">{{data_content.vice_name}}</view>
|
||||
<view v-if="(data_content.describe || null) != null" class="cr-grey margin-top-sm">{{data_content.describe}}</view>
|
||||
</view>
|
||||
<!-- 一二级数据渲染 -->
|
||||
<block v-if="(data_content.items || null) != null && data_content.items.length > 0">
|
||||
<!-- 二级模式 -->
|
||||
<block v-if="category_show_level == 2">
|
||||
<view class="two-content bg-white oh padding-main border-radius-main spacing-mb">
|
||||
<block v-for="(v, index) in data_content.items" :key="index">
|
||||
<view class="content-item padding-sm tc cp" :data-value="v.id" @tap="category_event">
|
||||
<view class="content wh-auto">
|
||||
<image v-if="(v.icon || null) != null" :src="v.icon" mode="aspectFit" class="icon radius"></image>
|
||||
<view class="text single-text">{{v.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 三级模式 -->
|
||||
<block v-if="category_show_level == 3">
|
||||
<block v-for="(v, index) in data_content.items" :key="index">
|
||||
<view class="spacing-nav-title">
|
||||
<text class="text-wrapper text-size-md">{{v.name}}</text>
|
||||
<text v-if="(v.describe || null) != null" class="vice-name margin-left-lg cr-gray">{{v.describe}}</text>
|
||||
<view :data-value="v.id" @tap="category_event" class="arrow-right padding-right-xxxl cr-gray fr cp">更多</view>
|
||||
</view>
|
||||
<view v-if="(v.items || null) != null && v.items.length > 0" class="bg-white oh padding-main border-radius-main spacing-mb">
|
||||
<block v-for="(vs, index2) in v.items" :key="index2">
|
||||
<view class="content-item padding-sm tc cp" :data-value="vs.id" @tap="category_event">
|
||||
<view class="right-container pa">
|
||||
<scroll-view :scroll-y="true" class="ht-auto">
|
||||
<!-- 一级内容基础容 -->
|
||||
<view v-if="(data_content || null) != null" class="padding-top-main padding-horizontal-main oh">
|
||||
<!-- 一级基础信息 -->
|
||||
<view v-if="(data_content.vice_name || null) != null || (data_content.describe || null) != null" class="one-content bg-white padding-main border-radius-main cp spacing-mb" :data-value="data_content.id" @tap="category_event">
|
||||
<view v-if="(data_content.vice_name || null) != null" class="text-size fw-b" :style="'color:' + data_content.bg_color + ';'">{{data_content.vice_name}}</view>
|
||||
<view v-if="(data_content.describe || null) != null" class="cr-grey margin-top-sm">{{data_content.describe}}</view>
|
||||
</view>
|
||||
<!-- 一二级数据渲染 -->
|
||||
<block v-if="(data_content.items || null) != null && data_content.items.length > 0">
|
||||
<!-- 二级模式 -->
|
||||
<block v-if="category_show_level == 2">
|
||||
<view class="two-content bg-white oh padding-main border-radius-main spacing-mb">
|
||||
<block v-for="(v, index) in data_content.items" :key="index">
|
||||
<view class="content-item padding-sm tc cp" :data-value="v.id" @tap="category_event">
|
||||
<view class="content wh-auto">
|
||||
<image v-if="(vs.icon || null) != null" :src="vs.icon" mode="aspectFit" class="icon radius"></image>
|
||||
<view class="text single-text">{{vs.name}}</view>
|
||||
<image v-if="(v.icon || null) != null" :src="v.icon" mode="aspectFit" class="icon radius"></image>
|
||||
<view class="text single-text">{{v.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 三级模式 -->
|
||||
<block v-if="category_show_level == 3">
|
||||
<block v-for="(v, index) in data_content.items" :key="index">
|
||||
<view class="spacing-nav-title">
|
||||
<text class="text-wrapper text-size-md">{{v.name}}</text>
|
||||
<text v-if="(v.describe || null) != null" class="vice-name margin-left-lg cr-gray">{{v.describe}}</text>
|
||||
<view :data-value="v.id" @tap="category_event" class="arrow-right padding-right-xxxl cr-gray fr cp">更多</view>
|
||||
</view>
|
||||
<view v-if="(v.items || null) != null && v.items.length > 0" class="bg-white oh padding-main border-radius-main spacing-mb">
|
||||
<block v-for="(vs, index2) in v.items" :key="index2">
|
||||
<view class="content-item padding-sm tc cp" :data-value="vs.id" @tap="category_event">
|
||||
<view class="content wh-auto">
|
||||
<image v-if="(vs.icon || null) != null" :src="vs.icon" mode="aspectFit" class="icon radius"></image>
|
||||
<view class="text single-text">{{vs.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</block>
|
||||
</block>
|
||||
<block v-else>
|
||||
<block v-else>
|
||||
<!-- 提示信息 -->
|
||||
<component-no-data propStatus="0" propMsg="没有子分类数据"></component-no-data>
|
||||
</block>
|
||||
</view>
|
||||
<view v-else>
|
||||
<!-- 提示信息 -->
|
||||
<component-no-data propStatus="0" propMsg="没有子分类数据"></component-no-data>
|
||||
</block>
|
||||
</view>
|
||||
<view v-else>
|
||||
<!-- 提示信息 -->
|
||||
<component-no-data propStatus="0" propMsg="没有子分类数据"></component-no-data>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
|
|
|
|||
Loading…
Reference in New Issue