微信小程序自定义picker封装成插件实现二级三级四级联动

最新推荐文章于 2025-05-05 14:20:51 发布

原创

最新推荐文章于 2025-05-05 14:20:51 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript #小程序

微信小程序自定义picker封装成插件实现二级三级四级联动

四级联动
三级联动
二级联动

页面调用

// array  picker 的数组
// active  picker 几级
// multiIndex picker 的回显
<PickerGroup array="{
   
   {array}}" active="{
   
   {4}}" multiIndex="{
   
   {[0,1,1,3]}}"></PickerGroup>

HTML

<view style="background:#FFF;padding:15px 0;">
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
        range="{
   
   {defaultarray}}" value="{
   
   {multiIndex}}">
        <text>{
   
   {
   
   defaultarray[0][multiIndex[0]]}}</text>
        <text wx:if="{
   
   {defaultarray.length>=2}}"> - {
   
   {
   
   defaultarray[1][multiIndex[1]]}}</text>
        <text wx:if="{
   
   {defaultarray.length>=3}}"> - {
   
   {
   
   defaultarray[2][multiIndex[2]]}}</text>
        <text wx:if="{
   
   {defaultarray.length>=4}}"> - {
   
   {
   
   defaultarray[3][multiIndex[3]]}}</text>
    </picker>
</view>

js

Component({
   
   
    options: {
   
   
        styleIsolation: 'apply-shared'
    },
    properties: {
   
   
        active: Number, //  显示几级picker
        array: Array, // array 数据
        multiIndex: Array, // 回显数据
    },
    /**
     * 页面的初始数据  
     */
    data: {
   
   
        // 试例数据
        // array: [{
   
   
        //     title: '一级列表1',
        //     children: [{
   
   
        //         title: '二级列表1',
        //         children: [{
   
   
        //             title: '三级列表1',
        //             children: [{
   
   
        //                 title: '四级列表1'
        //             }, {
   
   
        //                 title: '四级列表2'
        //             }, {
   
   
        //                 title: '四级列表3'
        //             }, {
   
   
        //                 title: '四级列表4'
        //             }, {
   
   
        //                 title: '四级列表5'
        //             }]
        //         }, {
   
   
        //             title: '三级列表2',
        //             children: [{
   
   
        //                 title: '四级列表21'
        //             }, {
   
   
        //                 title: '四级列表22'
        //             }, {
   
   
        //                 title: '四级列表23'
        //             }, {
   
   
        //                 title: '四级列表24'
        //             }, {
   
   
        //                 titl