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

看到一个需求，对一些前端小白或者刚开始写小程序的人来说，可能会有点帮助，效果如下：

就是以上效果，废话不多说，上代码

wxml:

<view class='list_box' wx:for='{{list}}' wx:key='this' wx:for-item='parentItem' wx:for-index='parentIndex' >

<view class='list'>

<view class='list_name_box' catchtap='listTap' data-parentindex='{{parentIndex}}'>

<text class='list_item_name'>{{parentItemlistName}}</text>

<image src='/img/downpng' class='icon_down {{parentItemshow&&"icon_down_rotate"}}'></image>

</view>

<view class='list_item_box' wx:if='{{parentItemshow}}'>

<view class='list_item' wx:for='{{parentItemitem}}' wx:key='this' catchtap='listItemTap' data-index='{{index}}'  data-parentindex='{{parentIndex}}'>

<view class='list_item_name_box'>

<text class='list_item_name'>{{itemitemName}}</text>

<image src='/img/downpng' class='icon_down {{itemshow&&"icon_down_rotate"}}'></image>

</view>

<view class='other_box' wx:if='{{itemshow}}'>

<view class='other'>

<text class='other_title'>内容：</text>

<text class='other_text'>{{itemcontent}}</text>

</view>

<view class='other'>

<text class='other_title'>时间：</text>

<text class='other_text'>{{itemtime}}</text>

</view>

</view>

</view>

</view>

</view></view>

然后wxss:

page{

background: #f3f7f7;}list_name_box{

background: #fff;

border-bottom: 1px solid #efefef;

display: flex;

height: 90rpx;

align-items: center;

padding: 0 25rpx;

font-size: 32rpx;}list_item_name{

flex: 1;}icon_down{

width: 35rpx;

height:35rpx;

transition:transform  03s;}/ list_item_box{

height: 0;

transition:height  03s;

overflow: hidden;

}

list_item_box_show{

height: 500rpx;

} /list_item_name_box{

background: #fff;

font-size: 30rpx;

height: 80rpx;

display: flex;

align-items: center;

padding: 0 25rpx 0 50rpx;}other{

display: flex;

height: 80rpx;

padding: 0 25rpx 0 50rpx;

align-items: center;

font-size: 30rpx;

color: #666;}icon_down_rotate{

transform:rotate(180deg);}

JS:

// pages/dome/domejsPage({

/

页面的初始数据

/

data: {

list:[

{listName:'列表1',

item:[{

itemName:'子列表1-1',

content:'1-1中的内容',

time: '2015-05-06'

}, {

itemName: '子列表1-2',

content: '1-2中的内容',

time: '2015-04-13'

}, {

itemName: '子列表1-3',

content: '1-3中的内容',

time: '2015-12-06'

}]

},

{

listName: '列表2',

item: [{

itemName: '子列表2-1',

content: '2-1中的内容',

time: '2017-05-06'

}, {

itemName: '子列表2-2',

content: '2-2中的内容',

time: '2015-08-06'

}, {

itemName: '子列表2-3',

content: '2-3中的内容',

time: '2015-11-06'

}]

}, {

listName: '列表3',

item: [{

itemName: '子列表3-1',

content: '3-1中的内容',

time: '2015-05-15'

}, {

itemName: '子列表3-2',

content: '3-2中的内容',

time: '2015-05-24'

}, {

itemName: '子列表1-3',

content: '3-3中的内容',

time: '2015-05-30'

}]

}

]

},

//点击最外层列表展开收起

listTap(e){

consolelog('触发了最外层');

let Index = ecurrentTargetdatasetparentindex,//获取点击的下标值

list=thisdatalist;

list[Index]show = !list[Index]show || false;//变换其打开、关闭的状态

if (list[Index]show){//如果点击后是展开状态，则让其他已经展开的列表变为收起状态

thispackUp(list,Index);

}

thissetData({

list    });

},

//点击里面的子列表展开收起

listItemTap(e){

let parentindex = ecurrentTargetdatasetparentindex,//点击的内层所在的最外层列表下标

Index=ecurrentTargetdatasetindex,//点击的内层下标

list=thisdatalist;

consolelog(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]itemlength;i<len;i++ ){

if(i!=Index){

list[parentindex]item[i]show=false;

}

}

}

thissetData({list});

},

//让所有的展开项，都变为收起

packUp(data,index){

for (let i = 0, len = datalength; i < len; i++) {//其他最外层列表变为关闭状态

if(index!=i){

data[i]show = false;

for (let j=0;j<data[i]itemlength;j++){//其他所有内层也为关闭状态

data[i]item[j]show=false;

}

}

}

},

onLoad: function (options) {

},

/

生命周期函数--监听页面初次渲染完成

/

onReady: function () {

},

/

生命周期函数--监听页面显示

/

onShow: function () {

},

/

生命周期函数--监听页面隐藏

/

onHide: function () {

},

/

生命周期函数--监听页面卸载

/

onUnload: function () {

},

/

页面相关事件处理函数--监听用户下拉动作

/

onPullDownRefresh: function () {

},

/

页面上拉触底事件的处理函数

/

onReachBottom: function () {

},

/

用户点击右上角分享

/

onShareAppMessage: function () {

}})

作者：

链接：>

你可以使用下面的JS代码来实现在控制台打印数字，每行15个数字，共2行：

```

// 定义要打印的数字

var nums = "012345678901234";

// 按照每行15个数字进行分割，并打印出来

consolelog(numsslice(0, 15));

consolelog(numsslice(15, 30));

```

解释一下代码：首先，我们定义了一个变量`nums`存储要打印的数字，这里我定义了一个长度为30的字符串，包含了0-9的数字。然后，我们使用`slice()`方法将这个字符串按照每行15个数字进行分割，并使用`consolelog()`方法在控制台上打印出来，第一行打印前15个数字，第二行打印后15个数字。

如果你想在小程序中打印数字，可以将`consolelog()`方法替换为`wxshowToast()`或者`wxshowModal()`方法，将数字显示在d窗中。

以上就是关于微信小程序怎么实现内容的展开和收起全部的内容，包括:微信小程序怎么实现内容的展开和收起、小程序如何使用json文件、微信小程序如何打印数字两行每行15个数字js等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！