树形组件-layui-ul

参数	说明
elem	必填,元素名
onItemClick	目录点击回调:function(item,e){}, item:目录的Dom,可以通过$(item).data()获取原始数据 e是点击的原始事件
onItemToggle	目录展开收缩回调:function(item,e){}, item:目录的Dom,可以通过$(item).data()获取原始数据 e是点击的原始事件
options	每个目录的设置项完整参数: { type: 'up', //必填 className:'layui-icon layui-icon-set', html:'', }, 未设置html时会自动根据className和Type自动生成默认支持type:up,down/delete 不需要请设置空数组
onOptionTrigger	设置点击回调:function (type, item, e){} type:设置的类型 item:目录的Dom,可以通过$(item).data()获取原始数据 e:点击的原始事件如果不设置回调,会自动调用上移/下移/删除操作如果设置回调,需要自行调用
list	目录数据,示例: [{ id: 0, //必须 pid: 0, title: 0, options: 同列表设置,如果不需要请设置为空数组 }]

方法	说明
appendItem(item)	将目录向上移动,没有返回值参数: item:list的其中一个目录数据,必须有id属性
renderList()	当调用了appendItem之后,必须调用renderList,才能显示,没有参数
itemMoveUp(item)	将目录向上移动,没有返回值参数: item:目录的Dom,onOptionTrigger的第二个参数
itemMoveDown(item)	将目录向下移动,没有返回值参数: item:目录的Dom,onOptionTrigger的第二个参数
itemDelete(id)	将目录向下移动,没有返回值参数: id:目录的id
itemUpdate(data)	将目录向下移动,没有返回值参数: data:list的其中一个目录数据,必须有id属性
getList()	将目录向下移动,没有参数返回示例: [ { id: 0, pid: 0, title: 0, options: 同列表设置,如果不需要请设置为空数组, index:0 //多了一个index属性,是这个目录在当前分组中的排序 } ]

文档目录

预览效果

文章标题

文章分组

二级文章标题

文章内部锚点

文章分组

二级文章标题

文章内部锚点

HTML
SCSS
CSS
UniApp

<div class="ul-bg-black">
    <div class="ul-doc-info-page">
        <div class="ul-doc-info-page-list">
            <div class="ul-doc-info-page-item page level-0">文章标题</div>
            <div class="ul-doc-info-page-item page level-0">文章标题</div>
            <div class="ul-doc-info-page-item group level-0">文章分组</div>
            <div class="ul-doc-info-page-item page level-1">二级文章标题</div>
            <div class="ul-doc-info-page-item page level-1">二级文章标题</div>
            <div class="ul-doc-info-page-item point level-2">文章内部锚点 </div>
            <div class="ul-doc-info-page-item point level-2">文章内部锚点 </div>
            <div class="ul-doc-info-page-item group level-0">文章分组</div>
            <div class="ul-doc-info-page-item page level-1">二级文章标题</div>
            <div class="ul-doc-info-page-item page level-1">二级文章标题</div>
            <div class="ul-doc-info-page-item point level-2">文章内部锚点 </div>
            <div class="ul-doc-info-page-item point level-2">文章内部锚点 </div>
        </div>
    </div>
</div>



.ul-doc-info-page-list {
    padding: 15px;
    color  : #999;

}

.ul-doc-info-page-item {
    line-height: 2;
    padding    : 0 15px;
    position   : relative;
}

.ul-doc-info-page-item.page {
    cursor   : pointer;
    font-size: 18px;
}

.ul-doc-info-page-item.group {
    color    : #bbb;
    font-size: 16px;
}

.ul-doc-info-page-item.point {
    color    : #eee;
    font-size: 14px;
}

.ul-doc-info-page-item.page:hover {
    background-color: #555;
}


.ul-doc-info-page-item.level-0 {}

.ul-doc-info-page-item.level-1 {
    margin-left: 15px;
}

.ul-doc-info-page-item.level-2 {
    margin-left: 30px;

}

.ul-doc-info-page-item.level-3 {
    margin-left: 45px;

}

.ul-doc-info-page-list {
  padding: 15px;
  color: #999;
}
.ul-doc-info-page-item {
  line-height: 2;
  padding: 0 15px;
  position: relative;
}
.ul-doc-info-page-item.page {
  cursor: pointer;
  font-size: 18px;
}
.ul-doc-info-page-item.group {
  color: #bbb;
  font-size: 16px;
}
.ul-doc-info-page-item.point {
  color: #eee;
  font-size: 14px;
}
.ul-doc-info-page-item.page:hover {
  background-color: #555;
}
.ul-doc-info-page-item.level-1 {
  margin-left: 15px;
}
.ul-doc-info-page-item.level-2 {
  margin-left: 30px;
}
.ul-doc-info-page-item.level-3 {
  margin-left: 45px;
}

<view class="ul-bg-black">
    <view class="ul-doc-info-page">
        <view class="ul-doc-info-page-list">
            <view class="ul-doc-info-page-item page level-0">文章标题</view>
            <view class="ul-doc-info-page-item page level-0">文章标题</view>
            <view class="ul-doc-info-page-item group level-0">文章分组</view>
            <view class="ul-doc-info-page-item page level-1">二级文章标题</view>
            <view class="ul-doc-info-page-item page level-1">二级文章标题</view>
            <view class="ul-doc-info-page-item point level-2">文章内部锚点 </view>
            <view class="ul-doc-info-page-item point level-2">文章内部锚点 </view>
            <view class="ul-doc-info-page-item group level-0">文章分组</view>
            <view class="ul-doc-info-page-item page level-1">二级文章标题</view>
            <view class="ul-doc-info-page-item page level-1">二级文章标题</view>
            <view class="ul-doc-info-page-item point level-2">文章内部锚点 </view>
            <view class="ul-doc-info-page-item point level-2">文章内部锚点 </view>
        </view>
    </view>
</view>

开源信息