小程序折叠面板的功能

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

默认显示两条，展开显示全部，点击全部内容时，箭头会变化。

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>

</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;
}