本文共 3597 字，大约阅读时间需要 11 分钟。

效果图：

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

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

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

   
    
     
      
      
       {
   {
   item.title}}
      
      
     
     
      
      
       
        {
   {
   item.title}}
       
      
      
      
       
        
         { { item.title}}
        
       
      
     
    
   

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.jsPage({
     /**   * 页面的初始数据   */  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      })    }  },})

转载地址：http://owzmf.baihongyu.com/