微信小程序实现折叠面板

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

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

wxml:

<view class='help'>
  <view class='help_item'>
    <view class='title' data-index='1' catchtap='panel'>
      <view class='title_1'>便签小程序使用免费吗</view>
      <view class='title_2'><image src="../../images/{{showIndex == 1 ? 'up':'down'}}.png"></image></view>
    </view>
    <view class='detail' wx:if="{{showIndex == 1}}">便签小程序是一款免费应用，并承诺永不收费1</view>
  </view>
  <view class='help_item'>
    <view class='title' data-index='2' catchtap='panel'>
      <view class='title_1'>便签小程序使用免费吗</view>
      <view class='title_2'><image src="../../images/{{showIndex == 2 ? 'up':'down'}}.png"></image></view>
    </view>
    <view class='detail' wx:if="{{showIndex == 2}}">便签小程序是一款免费应用，并承诺永不收费2</view>
  </view>
  <view class='help_item'>
    <view class='title' data-index='3' catchtap='panel'>
      <view class='title_1'>便签小程序使用免费吗</view>
      <view class='title_2'><image src="../../images/{{showIndex == 3 ? 'up':'down'}}.png"></image></view>
    </view>
    <view class='detail' wx:if="{{showIndex == 3}}">便签小程序是一款免费应用，并承诺永不收费3</view>
  </view>
</view>

wxss:

.help {
  width: 700rpx;
  margin: 0 auto;
}
.help .help_item {
  margin: 10rpx auto;
}
.help .help_item .title {
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #e2e2e2;
  display: flex;
}
.help .help_item .title .title_1 {
  width: 630rpx;
  height: 60rpx;
  padding-left: 20rpx;
}
.help .help_item .title .title_2 {
  width: 50rpx;
  height: 60rpx;
  text-align: center;
}
.help .help_item .title .title_2 image {
  width: 40rpx;
  height: 40rpx;
  margin: 10rpx auto;
}
.help .help_item .detail {
  margin: 10rpx auto;
  font-size: 25rpx;
  line-height: 40rpx;
  text-indent: 2em;
}

js:

  /**
   * 页面的初始数据
   */
  data: {
    showIndex:0
  },

  panel: function (e) {
    if (e.currentTarget.dataset.index != this.data.showIndex) {
      this.setData({
        showIndex: e.currentTarget.dataset.index
      })
    } else {
      this.setData({
        showIndex: 0
      })
    }
  }

最终效果：