vue抽屉_实现抽屉列表-微信小程序

本抽屉列表的实现方法来自与微信小程序的官方实例，本人将有关代码及样式提取了出来并加以精简、添加注释，方便大家的学习与理解。

实现效果

JS

Page({

data: {

list: [

{

id: 0,

name: '抽屉列表1',

open: false,

options: ['选项1', '选项2', '选项3']

},

{

id: 1,

name: '抽屉列表2',

open: false,

options: ['选项1', '选项2', '选项3']

},

// 增加列表请在此处添加新的列表对象

]

},

// 控制抽屉开关

kindToggle: function (e) {

var id = e.currentTarget.id, list = this.data.list;

// 使用id获取打开的子列表

for (var 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: list

});

}

})

WXML

{{item.name}}

▼

{{options}}

＞

WXSS

.list-item {

margin: 20rpx 0;

background-color: #FFFFFF;

border-radius: 4rpx;

overflow: hidden;

}

.list-item-hd {

padding: 30rpx;

display: flex;

align-items: center;

transition: opacity .3s;

}

.list-item-hd-show {

opacity: .2;

}

.list-title{

flex: 1;

}

.list-item-bd {

height: 0;

overflow: hidden;

}

.list-item-bd-show {

height: auto;

}

.option-box {

opacity: 0;

position: relative;

background-color: #FFFFFF;

line-height: 1.41176471;

font-size: 34rpx;

transform: translateY(-50%);

transition: .3s;

}

.option-box-show {

opacity: 1;

transform: translateY(0);

}

.state-arrow-open {

transform: rotate(180deg);

transition: transform 0.3s;

}

.option {

padding: 20rpx 30rpx;

position: relative;

display: flex;

align-items: center;

}

.option:before {

content: " ";

position: absolute;

left: 30rpx;

top: 0;

right: 30rpx;

height: 1px;

border-top: 1rpx solid #D8D8D8;

color: #D8D8D8;

}

.option:first-child:before {

display: none;

}

.option-text {

flex: 1;

}

作者：HoPGoldy