uniapp 16 三级目录数据展示

三级目录数据展示效果

代码实现

<template>
    <view class="pageBg">
        <!-- 一级标题 -->
        <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
            <view class="scroll-view-item_H" @click="chooseCategory(index)" v-for="(item, index) in resultList" :key="item.dictValue">
                <view class="title" :class="{fontBold: index == mainCategoryIndex}"> {{ item.dictLabel }} </view>
                <view v-if="index == mainCategoryIndex" class="bottomLine" :style="{ borderWidth: '1rpx'}"/>
                <view v-else class="bottomLine"/>
            </view>
        </scroll-view>
        <!-- 二级标题 -->
        <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
            <view class="scroll-view-item_H" @click="chooseSubCategory(index)" v-for="(item, index) in resultList[mainCategoryIndex]?.list" :key="item.id">
                <view class="title" :class="{fontBold: index == showSubCategoryIndex}"> {{ item.dictLabel }} </view>
                <view v-if="index == showSubCategoryIndex" class="bottomLine" :style="{ borderWidth: '1rpx'}"/>
                <view v-else class="bottomLine"/>
            </view>
        </scroll-view>
        <view class="container">
            <view class="list-item">
                <view class="notice-item" v-for="(noticeItem, idx) in resultList[mainCategoryIndex]?.list[showSubCategoryIndex]?.list" :key="idx">
                    <view class="title" @click="chooseDetailItem(idx)">
                        <view class="titleText">{{noticeItem.title}}</view>
                        <view class="iconImg">
                            <image v-if="idx != showNoticeIndex || (idx == showNoticeIndex && !isShowSecondItemDesc)" :src="fileBaseUrl + 'static/images/svg/upArrow.svg'" mode="aspectFit"/>
                            <image v-else-if="idx == showNoticeIndex && isShowSecondItemDesc" :src="fileBaseUrl + 'static/images/svg/downArrow.svg'" mode="aspectFit"/>
                        </view>
                    </view>
                    <view class="content" v-show="idx == showNoticeIndex  && isShowSecondItemDesc" v-html="noticeItem.content"></view>
                </view>
            </view>
        </view>
        <zdy-tabbar :current-page="3"></zdy-tabbar>
    </view>
</template>

<script setup>
    import { ref, getCurrentInstance } from 'vue'
    import { listNotice, selectNoticeTree } from '@/api/pet/pet'
    import { onLoad } from '@dcloudio/uni-app'
    
    const { proxy } = getCurrentInstance();
    
    
    const app = getApp()
    const fileBaseUrl = app.globalData.fileBaseUrl
    
    const resultList = ref([])
    
    //当前显示的一级菜单下标
    const mainCategoryIndex = ref(0)
    //二级菜单下标
    const showSubCategoryIndex = ref(0)
    //选中显示的具体公示数据下标
    const showNoticeIndex = ref(0)
    
    //是否显示一级标题下的二级标题（因为无论无何都需要展示，所以这里只写了赋值逻辑，但页面没有真正使用）
    const isShowItemDesc = ref(false)
    //三级目录数据详情数据是展开还是收起（右侧箭头向下则展开查看，向上则收起不展示）
    const isShowSecondItemDesc = ref(false)
    
    /**
     * 初始化数据
     */
    onLoad((e) => {
        initTreeDatas(e)
    })
    
    
    /**
     * 加载三级目录数据集合
     */
    async function initTreeDatas(e) {
        const res = await selectNoticeTree()
        console.log("noticeList dataList: ", e, res)
        if (e.onlyNormalQuestion) {
            const normalList = res.data.filter(x => x.dictLabel == "常见问题")
            console.log("noticeList normalList: ", normalList)
            resultList.value = [...normalList]
        } else {
            resultList.value = [...res.data]
        }
    }
    
    
    /**
     * 点击选择一级分类
     * 
     * @param {Object} index
     */
    function chooseCategory(index) {
        mainCategoryIndex.value = index
        showSubCategoryIndex.value = 0
        showNoticeIndex.value = 0
        isShowItemDesc.value = false
        isShowSecondItemDesc.value = false
    }
    
    
    /**
     * 点击公二级分类，展示/隐藏 公示内容 
     * 
     * @param {Object} index
     */
    function chooseSubCategory(index) {
        if (showSubCategoryIndex.value != index) {
            showSubCategoryIndex.value = index
            isShowItemDesc.value = true
        } else {
            isShowItemDesc.value = !isShowItemDesc.value
        }
        isShowSecondItemDesc.value = false
    }
    
    /**
     * 选择第 公示内容
     * 
     * @param {Object} idx
     */
    function chooseDetailItem(idx) {
        if (showNoticeIndex.value != idx) {
            showNoticeIndex.value = idx
            isShowSecondItemDesc.value = true
        } else {
            isShowSecondItemDesc.value = !isShowSecondItemDesc.value
        }
    }
</script>

<style lang="scss" scoped>
    /*二级标题 + 数据区*/
    .list-item {
        width: 100%;
        margin-bottom: 180rpx;
        /*一条标题 + 内容*/
        .notice-item {
            .title {
                display: flex;
                justify-content: space-between;
                background-color: white;
                padding: 35rpx 20rpx;
                border-bottom: 1rpx  solid #e7e7e7;
                .titleText {
                }
                .iconImg {
                    width: 30rpx;
                    height: 30rpx;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .content {
                letter-spacing: 1rpx;
                width: 100%;
                padding: 40rpx;
                background-color: #fff1e9;
                border-end-start-radius: $base-border-radius;
                border-end-end-radius: $base-border-radius;
                margin-bottom: 20rpx;
            }
        }
    }
</style>