js/微信小程序|实现多级目录,可展开折叠

前言:

项目简介:项目是关于知识学习的培训平台,有课程和资料模块,课程和资料的详情页均展示对应的课程或资料目录,目录支持多层级(无限层级),展示方式与B站上的视频目录同理,只不过我们需要无限级。如果一个层级目录下有好几个子级,点击这个层级目录可以展开或折叠。点击对应的子级目录时,当前被点击的那条要变色,代表此时正在看。

一、项目中想要的效果

下图展示项目中需要实现的效果:

右侧的按钮支持展开与折叠:

二、实现思路

我们可以将此功能作为组件抽离出来,因为目录是无限层级的,每一个子级都会比父级缩进一定间距。每一层级样式也都差不多,只是背景色和字体需要调整一下。

三、接口返回的数据结构

附上接口返回的数据结构,帮助理解:

三、实现方案

备注:此处将以微信小程序项目作为示例进行演示说明。

  1. 首先将目录部分作为组件使用,组件命名为chapterList,然后在详情页引入:
wxml 复制代码
<!-- 资料目录 -->
<view class="courseList">
  <view class="subtitle">资料列表</view>
  <block wx:for="{{detailsList}}" wx:key="index">
    <chapterList listData="{{item}}" step="1" playCourseChapterId="{{courseInfo.playCourseChapterId}}" classification="{{courseInfo.classification}}" bindgetFileId="getNewFileId"></chapterList>
  </block>
</view>
js 复制代码
  // 查看资料详情
  getCourseInfo:function(){
    var that = this
    https.get(api.getCourseInfo, obj).then((res) => {
      const returndata = res.data
      let detailsList = this.formatList(returndata.details, returndata.playCourseChapterId)
      that.setData({
        playCourseChapterId: returndata.playCourseChapterId, // 初始赋值
        courseInfo: returndata,
        detailsList,
      });
    })
  },

其中,formatList方法是用来判断选中的是哪条数据,根据唯一值playCourseChapterId来判断。然后手动给此对象加一个属性selected,后面会用来做样式的判断,代码如下:

js 复制代码
  formatList(list = [], playCourseChapterId) {
    circle(list)
    function circle(_list) {
      _list.forEach(item => {
        if (item.children && item.children.length) {
          circle(item.children)
        } else {
          item.selected = false
          if (item.chapterId === playCourseChapterId) {
            item.selected = true
          }
        }
      })
    }
    return list
  },
  1. chapterList组件中也要引用chapterList组件:
  1. chapterList组件中获取上面的select的值,添加不同的样式,如果select=true,根据需求展示被选中的样式,比如我们的需求是,字体颜色变蓝。
  2. 需要注意的是,所有需要父子组件传的事件,也要在chapterList组件中再接收一遍。

最后,希望对大家有帮助!

相关推荐
秋田君2 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡4 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele4 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴5 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子5 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead5 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界6 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser6 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
毛毛三由7 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
上单带刀不带妹7 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript