效果图如下:
<block wx:for-items="{{list}}" wx:key="{{item.id}}">
<view class="kind-list-item">
<view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
<view class="kind-list-text">{{item.name}}</view>
<view class="navigator-arrow"></view>
</view>
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
<navigator url="pages/{{page}}/{{page}}" class="navigator">
<view class="navigator-text">{{page}}</view>
<!-- icon -->
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
</view>
</view>
</block>
Page({
data: {
list: [{
id: 'view',
name: '视图容器',
open: false,
pages: ['view', 'scroll-view', 'swiper', 'movable-view', 'cover-view']
}],
},
kindToggle(e) {
const id = e.currentTarget.id
const list = this.data.list
for (let i = 0, len = list.length; i < len; ++i) {
if (list[i].id === id) {
list[i].open = !list[i].open
} else {
list[i].open = false
}
}
this.setData({
list
})
}
})
.navigator-box {
opacity: 0;
position: relative;
background-color: #fff;
line-height: 1.41176471;
font-size: 34rpx;
transform: translateY(-50%);
transition: 0.3s;
}
.navigator-box-show {
opacity: 1;
transform: translateY(0);
}
.navigator {
padding: 20rpx 30rpx;
position: relative;
display: flex;
align-items: center;
}
.navigator:before {
content: " ";
position: absolute;
left: 30rpx;
top: 0;
right: 30rpx;
height: 1px;
border-top: 1rpx solid #d8d8d8;
color: #d8d8d8;
}
.navigator:first-child:before {
display: none;
}
.navigator-text {
flex: 1;
}
.navigator-arrow {
padding-right: 26rpx;
position: relative;
}
.navigator-arrow:after {
content: " ";
display: inline-block;
height: 18rpx;
width: 18rpx;
border-width: 2rpx 2rpx 0 0;
border-color: #888;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: absolute;
top: 50%;
margin-top: -8rpx;
right: 28rpx;
}
.kind-list-item {
margin: 20rpx 0;
background-color: #fff;
border-radius: 4rpx;
overflow: hidden;
/* border-bottom: 1px dashed #888; */
}
.kind-list-item:first-child {
margin-top: 0;
}
.kind-list-text {
flex: 1;
}
.kind-list-img {
width: 60rpx;
height: 60rpx;
}
.kind-list-item-hd {
padding: 30rpx;
display: flex;
align-items: center;
transition: opacity 0.3s;
}
.kind-list-item-hd-show {
opacity: 0.2;
}
.kind-list-item-bd {
height: 0;
overflow: hidden;
}
.kind-list-item-bd-show {
height: auto;
}