看到一個(gè)需求,對(duì)一些前端小白或者剛開(kāi)始寫小程序的人來(lái)說(shuō),可能會(huì)有點(diǎn)幫助,效果如下:
就是以上效果,廢話不多說(shuō),上代碼 <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'>{{parentItem.listName}}</text> <image src='/img/down.png' class='icon_down {{parentItem.show&&"icon_down_rotate"}}'></image> </view> <view class='list_item_box' wx:if='{{parentItem.show}}'> <view class='list_item' wx:for='{{parentItem.item}}' wx:key='this' catchtap='listItemTap' data-index='{{index}}' data-parentindex='{{parentIndex}}'> <view class='list_item_name_box'> <text class='list_item_name'>{{item.itemName}}</text> <image src='/img/down.png' class='icon_down {{item.show&&"icon_down_rotate"}}'></image> </view> <view class='other_box' wx:if='{{item.show}}'> <view class='other'> <text class='other_title'>內(nèi)容:</text> <text class='other_text'>{{item.content}}</text> </view> <view class='other'> <text class='other_title'>時(shí)間:</text> <text class='other_text'>{{item.time}}</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 0.3s; } /* .list_item_box{ height: 0; transition:height 0.3s; 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/dome.js Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { list:[ {listName:'列表1', item:[{ itemName:'子列表1-1', content:'1-1中的內(nèi)容', time: '2015-05-06' }, { itemName: '子列表1-2', content: '1-2中的內(nèi)容', time: '2015-04-13' }, { itemName: '子列表1-3', content: '1-3中的內(nèi)容', time: '2015-12-06' }] }, { listName: '列表2', item: [{ itemName: '子列表2-1', content: '2-1中的內(nèi)容', time: '2017-05-06' }, { itemName: '子列表2-2', content: '2-2中的內(nèi)容', time: '2015-08-06' }, { itemName: '子列表2-3', content: '2-3中的內(nèi)容', time: '2015-11-06' }] }, { listName: '列表3', item: [{ itemName: '子列表3-1', content: '3-1中的內(nèi)容', time: '2015-05-15' }, { itemName: '子列表3-2', content: '3-2中的內(nèi)容', time: '2015-05-24' }, { itemName: '子列表1-3', content: '3-3中的內(nèi)容', time: '2015-05-30' }] } ] }, //點(diǎn)擊最外層列表展開(kāi)收起 listTap(e){ console.log('觸發(fā)了最外層'); let Index = e.currentTarget.dataset.parentindex,//獲取點(diǎn)擊的下標(biāo)值 list=this.data.list; list[Index].show = !list[Index].show || false;//變換其打開(kāi)、關(guān)閉的狀態(tài) if (list[Index].show){//如果點(diǎn)擊后是展開(kāi)狀態(tài),則讓其他已經(jīng)展開(kāi)的列表變?yōu)槭掌馉顟B(tài) this.packUp(list,Index); } this.setData({ list }); }, //點(diǎn)擊里面的子列表展開(kāi)收起 listItemTap(e){ let parentindex = e.currentTarget.dataset.parentindex,//點(diǎn)擊的內(nèi)層所在的最外層列表下標(biāo) Index=e.currentTarget.dataset.index,//點(diǎn)擊的內(nèi)層下標(biāo) list=this.data.list; console.log(list[parentindex].item,Index); list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//變換其打開(kāi)、關(guān)閉的狀態(tài) if (list[parentindex].item[Index].show){//如果是操作的打開(kāi)狀態(tài),那么就讓同級(jí)的其他列表變?yōu)殛P(guān)閉狀態(tài),保持始終只有一個(gè)打開(kāi) for (let i = 0, len = list[parentindex].item.length;i<len;i++ ){ if(i!=Index){ list[parentindex].item[i].show=false; } } } this.setData({list}); }, //讓所有的展開(kāi)項(xiàng),都變?yōu)槭掌? packUp(data,index){ for (let i = 0, len = data.length; i < len; i++) {//其他最外層列表變?yōu)殛P(guān)閉狀態(tài) if(index!=i){ data[i].show = false; for (let j=0;j<data[i].item.length;j++){//其他所有內(nèi)層也為關(guān)閉狀態(tài) data[i].item[j].show=false; } } } }, onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 */ onUnload: function () { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { } })
完結(jié)。 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)