微信小程序实现折叠面板(展开一个面板,隐藏其他面板)

原文链接地址:https://www.cnblogs.com/adobe-lin/p/9564549.html

微信小程序实现折叠面板

wxml:

便签小程序使用免费吗便签小程序是一款免费应用,并承诺永不收费1便签小程序使用免费吗便签小程序是一款免费应用,并承诺永不收费2便签小程序使用免费吗便签小程序是一款免费应用,并承诺永不收费3

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      })

    }

  }

 最终效果:

你可能感兴趣的:(微信小程序实现折叠面板(展开一个面板,隐藏其他面板))