微信小程序| 365笔记第35天 | 手风琴效果

1.实现一个手风琴效果，点击展开，点击合起；

wxml:

    <view class='box'>
      <block wx:for="{{textList}}">
        <view class='text-item'>
          <view class='text-name'>{{item.title}}</view>
          <view class='text-desc' style="{{item.upStatus?'':'display:-webkit-box'}}">{{item.description}}</view>
          <view class='text-bottom'>
            <view class='text-btn' data-index="{{index}}" bindtap='upDown'>
              <image hidden='{{item.upStatus}}' src='/images/slide.png'></image>
              <image hidden='{{!item.upStatus}}' src='/images/up.png'></image>
              <text>{{!item.upStatus?'展开':'收起'}}</text>
            </view>
          </view>
        </view>
      </block>
    </view>

wxss:

    .box {
      display: flex;
      flex-direction: column;
      width: 690rpx;
      margin: auto;
    }

    .text-item {
      padding: 40rpx 0;
      border-bottom: solid 1px #efefef;
    }

    .text-name {
      margin-top: 10rpx;
      font-family: PingFangSC-Medium;
      font-size: 34rpx;
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    .text-desc {
      font-family: PingFangSC-Regular;
      font-size: 26rpx;
      color: #666;
      margin-top: 10rpx;
      /* display: -webkit-box; */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .text-bottom {
      display: flex;
      justify-content: flex-end;
    }

    .text-btn {
      margin-top: 20rpx;
      width: 103rpx;
      height: 39rpx;
      border: solid 1px #d2d2d2;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .text-btn image {
      width: 19rpx;
      height: 12rpx;
      margin-right: 10rpx;
    }

    .text-btn text {
      font-family: PingFangSC-Regular;
      font-size: 22rpx;
      color: #999;
    }

js:

    data: {
        textList: [{
            'description': "微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,",
          'title': "微信小程序 - 折叠展开效果",
          },
          
        ],
      },

    //原本没有upStatus这个字段，所以默认值为false
      upDown(event) {
        var index = event.currentTarget.dataset['index'];
        this.data.textList[index].upStatus = !this.data.textList[index].upStatus;
        this.setData({
          textList: this.data.textList
        })
      },

看下效果：

图片.png

图片.png