小程序实现自定义的多层级单选和多选（每列单选，每行多选）

最新推荐文章于 2022-07-14 14:15:11 发布

大灰狼吃小白兔

最新推荐文章于 2022-07-14 14:15:11 发布

阅读量1.3k

点赞数

分类专栏：小程序文章标签：小程序自定义单选、多选

本文链接：https://blog.csdn.net/weixin_44268473/article/details/103612075

版权

这篇博客展示了如何在小程序中实现自定义的多层级单选和多选功能，利用自定义下拉框组件，封装成可复用的代码。内容包括wxml、wxss、json和js的实现细节，数据源layouts和组件内部数据data的使用。

摘要由CSDN通过智能技术生成

效果：

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 ? &#