本文实例为大家分享了小程序实现自定义多层级单选和多选的具体代码，供大家参考，具体内容如下
效果：
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 : 20 rpx;
box-sizing: border-box;
}
.cell-border {
border-radius: 6 rpx;
border : 1px solid #999 ;
margin-bottom : 10 rpx;
}
.select-list{
display : flex;
flex- direction : row;
justify- content : space-around;
width : 100% ;
height : 360 rpx;
padding : 20 rpx;
box-sizing: border-box;
background-color : #fff ;
border : 1px solid #eee ;
}
.select-list .option{
display : flex;
flex- direction : column;
font-size : 24 rpx;
}
.option-item{
width : 80 rpx;
height : 100 rpx;
background-color : #eee ;
text-align : center ;
margin-top : 5px ;
padding : 2px ;
}
.option-item-active{
width : 80 rpx;
height : 100 rpx;
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})
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_44268473/article/details/103612075
dy("nrwz");
查看更多关于小程序实现自定义多层级单选和多选的详细内容...