⼩程序实现⾃定义多层级单选和多选
本⽂实例为⼤家分享了⼩程序实现⾃定义多层级单选和多选的具体代码，供⼤家参考，具体内容如下
效果：
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="{{lumn}}" wx:key="index"
wx:for-item="curItem"
data-key="{{curItem.key}}"
box sizing
data-colkey="{{lKey}}"
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{
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,
{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.lkey;
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})
}
}
})
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。