原生小程序实现手风琴

本文主要讲述用原生实现手风琴效果，并且默认展开第一个，点击其他的第一个折叠，其他同理，永远只会显示一条数据的展开，使用到了iconfont的图标，原生不会引入的请看iconfont引入保姆级教程

效果如下

1、wxml文件

   
      
        
           {{item.device_name}}
          
          
        
        
          
          
            
              设备ID
              {{item.deviceId || '--'}}
            
            
              阳光
              {{item.sunlight || '--'}}
            
            
              PM2.5
              
              {{item.pm25 || '--'}}
            
            
              氨气
              {{item.ammonia || '--'}}
            
          
        
      

    

2、wxss文件

.conter-flex{
    /* color: #999999; */
    font-size: 35rpx;
    height: 80%;
  width: 90%;
  /* border: 1px solid red; */
  margin: 0 auto;
 
}
 .title{
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10rpx;
    padding: 20rpx;
    margin: 10rpx 0;
  }
.flex-con{
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0;
    font-size: 29rpx;
    border-bottom: 1px solid #ddd;
}
 .flex-left{
    font-size: 29rpx;
  }

3、js文件，wxml文件的dataSoure.evn_list，和dataSoure.xx都是后台反的数据，是数组格式对象，显示也是通过wx:for循环实现，通过判断当前所点击的索引赋值给showIndex实现单条数据的显示

//data中数据
    showIndex: '',
//点击事件触发panel
  panel:function (e) {
    console.log(e.currentTarget.dataset.index,'获取当前元素下标签');
         this.setData({
        showIndex: e.currentTarget.dataset.index
      })
  },

手风琴教程到此结束，希望对你有所帮助~