本文实例为大家分享了小程序实现自定义多层级单选和多选的具体代码，供大家参考，具体内容如下
效果：
ps：这儿是用自定义的下拉框，我把它封装成了一个组件
wxml
<view class="select-box">
<view class="select-title">
<view class="cell-border">
<van-field value="{{ layout }}" data-key="layout" placeholder="请输入" required icon="arrow" label="户型" bind:tap="onChange" />
</view>
</view>
<view class="select-list" wx:if="{{show}}">
<view class="option" wx:for="{{layouts}}" wx:key="index">
<view class="{{curItem.checked ? 'option-item-active' : 'option-item'}}"
wx:for="{{item.column}}" wx:key="index"
wx:for-item="curItem"
data-key="{{curItem.key}}"
data-colkey="{{item.colKey}}"
data-name="{{curItem.name}}"
bind:tap="getOptionItem">
{{curItem.name}}
</view>
</view>
</view>
</view>
wxss
.select-box{
width: 100%;
padding: 20rpx;
box-sizing: border-box;
}
.cell-border {
border-radius: 6rpx;
border: 1px solid #999;
margin-bottom: 10rpx;
}
.select-list{
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
height: 360rpx;
padding: 20rpx;
box-sizing: border-box;
background-color: #fff;
border: 1px solid #eee;
}
.select-list .option{
display: flex;
flex-direction: column;
font-size: 24rpx;
}
.option-item{
width: 80rpx;
height: 100rpx;
background-color: #eee;
text-align: center;
margin-top: 5px;
padding: 2px;
}
.option-item-active{
width: 80rpx;
height: 100rpx;
background-color: #FF6600;
text-align: center;
margin-top: 5px;
padding: 2px;
color:#fff;
}
json
{
"component": true,
"usingComponents": {
"van-field": "../../vant/field/index",
}
}
js
ps:data是组件本身的数据，layouts是数据源
Component({
properties:{
},
data:{
show:false,
curKey:-1,
colKey:-1,
layouts:[
{
colKey:0,
column:[
{name:"1室",key:0,},
{name:"2室",key:1,},
{name:"3室",key:2,},
{name:"4室",key:3,},
{name:"5室",key:4,},
{name:"6室",key:5,} ]
},
{
colKey:1,
column:[
{name:"1厅",key:0,},
{name:"2厅",key:1,},
{name:"3厅",key:2,},
{name:"4厅",key:3,},
{name:"5厅",key:4,},
{name:"6厅",key:5,} ]
},
{
colKey:2,
column:[
{name:"1厨",key:0,},
{name:"2厨",key:1,},
{name:"3厨",key:2,},
{name:"4厨",key:3,},
{name:"5厨",key:4,},
{name:"6厨",key:5,}]
},
{
colKey:3,
column:[
{name:"1卫",key:0,},
{name:"2卫",key:1,},
{name:"3卫",key:2,},
{name:"4卫",key:3,},
{name:"5卫",key:4,},
{name:"6卫",key:5,}
]
},
{
colKey:4,
column:[
{name:"1阳台",key:0,},
{name:"2阳台",key:1,},
{name:"3阳台",key:2,},
{name:"4阳台",key:3,},
{name:"5阳台",key:4,},
{name:"6阳台",key:5,}
]
}
]
},
methods:{
onChange(){
const {show} = this.data;
this.setData({
show:!show
})
},
getOptionItem(event){
console.log("event",event)
const key = event.currentTarget.dataset.key;
const cK = event.currentTarget.dataset.colkey;
const {curKey,colKey,layouts} = this.data;
this.setData({
curKey:key,
colKey:cK
})
//用checked字段判断，允许每列之间单选,多行之间多选
layouts[cK].column.map(cur => {
return cur.checked = false;
})
layouts[cK].column[key].checked = true;
this.setData({layouts})
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。