通过折叠面板收纳内容区域
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
#基本使用
外层包裹一个index-list组件，锚点通过index-anchor组件传入，自定义列表内容通过index-item嵌套使用
-
nvue需要将
index-anchor写在index-item的外部 -
非nvue需要将
index-anchor嵌套在index-item的内部 -
可以通过
index-list参数自定义索引字符列表 -
需要监听页面的onPageScroll事件，将当前滚动条高度传入
<template> <u-index-list :index-list="indexList"> <template v-for="(item, index) in itemArr"> <u-index-anchor :text="indexList[index]"></u-index-anchor> <u-index-item> <u-index-anchor :text="indexList[index]"></u-index-anchor> <view class="list-cell" v-for="(cell, index) in item"> {{cell}} </view> </u-index-item> </template> </u-index-list> </template> <script> export default { data() { return { indexList: ["A", "B", "C"], itemArr: [ ['列表A1','列表A2','列表A3'], ['列表B1','列表B2','列表B3'], ['列表C1','列表C2','列表C3'] ] } } } </script> <style lang="scss" scoped> .list-cell { display: flex; box-sizing: border-box; width: 100%; padding: 10px 24rpx; overflow: hidden; color: #323233; font-size: 14px; line-height: 24px; background-color: #fff; } </style>index-list组件