小程序多层级单选和多选 小程序实现自定义多层级单选和多选
大灰狼吃小白兔 人气:0想了解小程序实现自定义多层级单选和多选的相关内容吗，大灰狼吃小白兔在本文为您仔细讲解小程序多层级单选和多选的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：小程序多层级单选,小程序多层级多选,小程序单选多选，下面大家一起来学习吧。
效果：
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})
}
}
})
加载全部内容