微信小程序肿么实现内容的展开和收起?

XML

看到一个需求，对一些前端小白或者刚开始写小程序的人来说，可能会有点帮助，效果如下：就是以上效果，废话不多说，上代码wXML:view| false;//变换其打开、关闭的状态if (list[Index].show){//如果点击后是展开状态，则让其他已经展开的列表变为收起状态this.packUp(list,Index);}this.setData({list });},//点击里面的子列表展开收起listItemTap(e){let parentindex = e.currentTarget.dataset.parentindex,//点击的内层所在的最外层列表下标Index=e.currentTarget.dataset.index,//点击的内层下标list=this.data.list;console.log(list[parentindex].item,Index);list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//变换其打开、关闭的状态if (list[parentindex].item[Index].show){//如果是操作的打开状态，那么就让同级的其他列表变为关闭状态，保持始终只有一个打开for (let i = 0, len = list[parentindex].item.length;ilen;i++ ){if(i!=Index){list[parentindex].item[i].show=false;}}}this.setData({list});},//让所有的展开项，都变为收起packUp(data,index){for (let i = 0, len = data.length; i len; i++) {//其他最外层列表变为关闭状态if(index!=i){data[i].show = false;for (let j=0;jdata[i].item.length;j++){//其他所有内层也为关闭状态data[i].item[j].show=false;}}}},onLoad: function (options) {},/* 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/* 生命周期函数--监听页面显示*/onShow: function () {},/* 生命周期函数--监听页面隐藏*/onHide: function () {},/* 生命周期函数--监听页面卸载*/onUnload: function () {},/* 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/* 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})作者：链接：https://www.imooc.com/article/30662来源：慕课网本文原创发布于慕课网 ，转载请注明出处，谢谢合作