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

「爱情、让人受尽委屈。」 2024-04-17 17:41 70阅读 0赞

#### 效果图： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]

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

##### 分析：左右布局，线条实现用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
          })
        }
      },
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8fd678b6b2c641ce914bc6e77eee4fc8.png