小程序折叠面板的功能
默认显示两条,展开显示全部,点击全部内容时,箭头会变化。
html部分
<view wx:if="{{progress.table.length>0 && !isTechnicist}}" class="pay-history"> <view class="viewbd"> <view class="title"> <text class="title_img"></text> <text>进度</text> <text>({{progress.table.length}})</text> <view bindtap="tapMenuProgress" style='float:right' class="{{progress.table.length <= 2? 'hidden':''}}"> <text class="showCon">全部内容</text> <image class='menu-item-arrow {{progress.opened ? "open" : "close"}}' src='/res/icon/jt_r.png'></image> </view> </view> <view style="margin-top: 45rpx;"> <block wx:for="{{progress.tableToShow}}" wx:for-item="item" wx:key="item.ProgDate" wx:for-index="idx"> <template is="progressRecordTemplate" data="{{...item}}" /> </block> </view> </view> </view>
模板内部分
<view wx:if="{{Head}}">
<image class="dot-select" src="/res/icon/icon-dot-select.png"></image>
</view>
<view wx:else>
<image class="dot" src="/res/icon/icon-dot.png"></image>
</view>
<view class="order-line"></view>
</view>
js部分
data:{ progress:{ 'table':[], 'tableToShow':[], 'total':0, 'opened':true } }, onLoad: function (options) { this.getDetailPageData(options.id); } getDetailPageData: function (detailId) { var _this = this; wx.request({ url: projectDetailInfo, data: { tokeninfo: app.user.tokeninfo, saleid: detailId }, method: 'POST', success: function (res) {
var progressTable = res.data.data.Table3;
for (var i = 0; i < progressTable.length; i++) {
if (i == 0) {
progressTable[0].Head = true;
} else {
progressTable[i].Head = false;
}
}
_this.showProgressBrief(progressTable);
} showPay: function (table, tableToShow, opened) { var pay = {}; pay['table'] = table; pay['tableToShow'] = tableToShow; pay['opened'] = opened; this.setData({ pay: pay }) }, showPayAll: function (table) { var opened = true; this.showPay(table, table, opened); }, showPayBrief: function (table) { var opened = false; var total = table.length; var idx = 0; if (total >= 2) { idx = 2; } else if (total == 1) { idx = 1; } else { idx = 0 } var tableToShow = table.slice(0, idx); this.showPay(table, tableToShow, opened); }, tapMenuPay: function () { var total = this.data.pay.table.length; if (this.data.pay.opened) { this.showPayBrief(this.data.pay.table) } else { this.showPayAll(this.data.pay.table) } }
css部分:
.menu-item-arrow{ width:20rpx; height:18rpx; transition: 400ms; margin-left:10rpx; } .menu-item-arrow.open{ transform: rotate(90deg); } .menu-item-arrow.close { transform: rotate(0deg); } .hidden{ display: none; }