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].