怎么在小程序中自定义一个多层级单选和多选功能

这篇文章给大家介绍怎么在小程序中自定义一个多层级单选和多选功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

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})        }    }})

关于怎么在小程序中自定义一个多层级单选和多选功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。