效果图:
需求 : 点击可展开,且可展开多个
分析:左右布局,线条实现用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(“图片没有请自行寻找代替”)
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({
flag:arr
})
}
},
})