微信小程序实现点击下拉展示左右布局

效果图：

需求 ： 点击可展开，且可展开多个

分析：左右布局，线条实现用view套上（不影响布局，可参考代码）；用一个数组记录事件，1为展开，0为收起，可以实现不关联，数组的赋值就用另外一个数组来实现（看代码）

wxml(代码贴的时候报错就稍微调一下，可能是空格问题)

<block class="block" wx:for="{{nameList}}" wx:key="index">
<view class="top">
<view bindtap='bindShowList' data-idx="{{index}}" class="leftTitle">
<image class="icon" src="{{item.image}}"></image>
<view class="icon-title">{{item.title}}</view>
<image class="arr"
 style="transform:{{flag[index]==1?'rotate('+a1+'deg)':'rotate(0deg)'}}" src="{{item.dimg}}"></image>
</view>
<view class="rightTitle">
<!-- 下拉框 -->
<view class='top-selected' >
<view bindtap="topage"
 data-item="{{item}}" 
 style="border-top:{{index==1?'1px solid #E6E6E6':''}}"
  wx:for='{{item.list}}' wx:key="index" wx:if='{{index<2}}'>{{item.title}}</view>
</view>
<!-- 下拉需要显示的列表 -->
<view class="select_box" wx:if="{{flag[index]==1}}">
<view wx:for="{{item.list}}" wx:key="idnex" wx:if='{{index>1}}'>
<view bindtap="topage"
 data-item="{{item}}"
  class="select_one"
   style="border-top:1px solid #E6E6E6">{{item.title}}</view>
</view>
</view>
</view>
</view>
</block>

WXSS

.block{
display: flex;
flex-direction: column;
}
.leftTitle{
font-size: 22rpx;
width: 200rpx;
padding-top: 30rpx;
display:flex;
flex-direction:column;
align-items:center;
}
.rightTitle{
display:flex;
flex-direction:column;
flex:1;
border-left:1px solid #E6E6E6;
margin:40rpx 0;
}
/* 图标 */
.icon{
height:56rpx;
width:56rpx
}
.icon-title{
color: #666666;
}
/* 下拉图标 */
.arr{
height:14rpx;
width:26rpx;
}
/* 顶部 */
.top{
display:flex;
margin-top: 40rpx;
background: #FFFFFF;
width: 100vw;
padding: 0 20rpx;
line-height: 80rpx;
}
/* 下拉框 */
.top-selected{
flex-direction:column;


display: flex;
justify-content: space-between;
padding: 0 20rpx;
font-size: 22rpx;
line-height: 80rpx;
}
/* 下拉内容 */
.select_box {
padding: 0 20rpx;
background-color: #fff;
overflow: hidden;
font-size: 22rpx;
}
.select_one {
width: 100%;
position: relative;
}
/* 下拉图标 */
.top-selected image{
height:50rpx;
width:50rpx;
position: absolute;
right: 0rpx;
top: 20rpx;
}

js(“图片没有请自行寻找代替”)

// pages/userQuestion/userQuestion.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 判断
    flag:[0,0,0,0],
    selectFlag:'-999',
    a1:0,
    select:false,
    nameList:[{
      title:"如何赚钱",
      image:"/static/qustion1.png",
      dimg:"/static/questiondown.png",
      list:[
       {
        title:"如何分享商品赚佣金？",
        text:"1",
       },{
        title:"如何分享频道赚佣金？",
        text:"1",
       },{
        title:"自己下单有佣金吗？",
        text:"1",
       },{
        title:"如何查看每件商品的佣金？",
        text:"1",
       }
      ]
    },{
      title:"佣金结算说明",
      image:"/static/question2.png",
      dimg:"/static/questiondown.png",
      list:[
        {
          title:"佣金可以提现到微信钱包吗？", 
          text:"1"
        },{
          title:"下单后佣金多久才能到账？", 
          text:"1"
        },{
          title:"如何查看我的推广订单收益？", 
          text:"1"
        },{
          title:"如何查看我的佣金明细？", 
          text:"1"
        }
      ]
    },{
      title:"系统奖励说明",
      image:"/static/question4.png",
      dimg:"/static/questiondown.png",
      list:[
        {
          title:"系统奖励是什么？", 
          text:"1"
        },{
          title:"好友出单我有奖励吗？", 
          text:"1"
        },{
          title:"好友的等级跟我的收益有关吗？", 
          text:"1"
        },{
          title:"如何邀请好友绑定关系？", 
          text:"1"
        }
      ]
    },{
      title:"其他常见问题",
      image:"/static/question3.png",
      dimg:"/static/questiondown.png",
      list:[
        {
          title:"商品的券后价这么低，怎么保证商品的品质？", 
          text:"1"
        },{
          title:"通过本小程序购物是否安全、有保障？", 
          text:"1"
        },{
          title:"什么是拼多多优惠券推广返佣？", 
          text:"1"
        },{
          title:"如何成为推手，赚取佣金？", 
          text:"1"
        },{
          title:"我们与拼多多是什么关系?", 
          text:"1"
        }
      ]
    }],
  },

  // *点击下拉*
  bindShowList(e){
    console.log("get it",e);
    var idx = e.currentTarget.dataset.idx;
    let arr = [];
    
      arr=this.data.flag
    console.log("this list ",arr);
    if(this.data.flag[idx]==1){
      arr[idx]=0;
      console.log("this list ",arr);
      this.setData({
        flag:arr
      })
      return
    }else if(this.data.flag[idx]==0){
      arr[idx]=1;
      console.log("this list ",arr);
      
      this.setData({
        // a1 : 180,
        flag:arr
        // [item]:1
      })
    }
  },
})