微信小程序树形选择组件

前言:微信小程序并没有提供这样的组件 ,vant也没有,就自己写了一个

支持懒加载和一次性加载

懒加载:父组件会接收到type来区分是点击的图标还是标题,点击图标拿到当前数据,进行查询子级数据赋值给组件即可,点击标题可做选中操作

技术点:

1、组件自身递归

2、父子间事件通信 (需要层层向上传递)

子组件:

wxml文件

<view class="tree-box">
    <view style="padding-left: 30rpx">
        <view class="item" wx:for="{{treeList}}" wx:key="*this">
            <view class="item-icon-text">
                <van-icon custom-style="{{item.collapse?'transform:rotate(90deg)':'transform:rotate(0deg)'}}" name="play" wx:if="{{item.children}}" bind:tap="showChildren" data-id="{{item.id}}"/>
                <text class="{{item.selected?'current':''}}" data-id="{{item.id}}" bind:tap="handleClick">{{item.text}}</text>
            </view>
            <block wx:if="{{item.children&&item.collapse}}">
                <tree class="tree" treeList="{{item.children}}" is-can-choose-parnent="{{isCanChooseParnent2}}" bind:handleClick="treeClick"></tree>
            </block>
        </view>
    </view>
</view>

js文件

//树形单选组件
Component({
    properties:{
        treeListIndex: {// 默认为0,当前循环的第几层,用于tree样式展示
            type: Number,
            value: 0
        },
        treeList: Array,
        isCanChooseParnent:false
    },
    data:{
        key:Math.random(),
        treeArr:[
            {
                id:1,
                text:'一级',
                collapse:true,
                selected:false,
                children:[
                    {
                        id:"1-1",
                        text:"二级-1",
                    },
                    {
                        id:"1-2",
                        text:"二级-2",
                        children:[
                            {
                                id:"1-2-1",
                                text:"2-三级-1"
                            }
                        ]
                    },
                ]
            }
        ],
        isExec:false,
        currentIndex:"",
        currentItem:"",
        isCanChooseParnent2:false
    },
    observers:{
        'isCanChooseParnent':function(val){
            this.setData({
                isCanChooseParnent2:val
            })

        }
    },
    methods:{
        showChildren(e){
            let id = e.currentTarget.dataset.id
            this.setData({
                isExec:!this.data.isExec
            })
            let item = this.findCurrentItem(id,this.data.treeList,'collapse')
            this.setData({
                treeList:this.data.treeList
            })
            //点击icon
            this.triggerEvent("handleClick",{item,'type':'icon'})

        },
        /**
         * @t 功能类型 collapse:点击图标展开收起,title:点击标题事件
         * */
        findCurrentItem(id,list,t=''){
            let item =""
            list.forEach(it=>{
                if(it.id==id){
                    if(t=='collapse'){
                        it.collapse = !it.collapse
                    }
                    if(t=="title"){
                        it.selected = !it.selected
                    }
                    item = it
                }else{
                    if(t=="title"){
                        it.selected =false
                    }
                    if(it.children){
                        this.findCurrentItem(id,it.children,t)
                    }
                }
            })
            return item
        },
        handleClick(e){
            let id = e.currentTarget.dataset.id
            let arrs = [...this.data.treeList]
            let item =this.findCurrentItem(id,arrs,"title")
            console.log(this.data.isCanChooseParnent2,3333333)
            if(item?.children&&!this.data.isCanChooseParnent2){
                wx.showToast({title:"不能选择父级节点",icon:'none'})
                return
            }
            this.setData({
                currentIndex:id,
                treeList:arrs,
                currentItem:item
            })
            wx.setStorageSync("tree-item",item)
            this.triggerEvent("handleClick",{item})
        },
        //递归接收
        treeClick(e){
            let {item,type='val'} = e.detail
            this.triggerEvent("handleClick",{item,type})
        }

    },
    created(){

    },

    lifetimes:{
        attached: function() {
            this.data.treeArr = JSON.parse(JSON.stringify(this.data.treeList))
        },
        detached: function() {
            // 在组件实例被从页面节点树移除时执行
        },
    }


})

json文件

{
  "usingComponents": {
    "tree":"/dangerSourceIdentify/pages/treeSelect/index",
    "van-icon": "@vant/weapp/icon/index"

  }
}

wxss文件:

.tree-box {
    background: white;
    font-size: 34rpx;
}
.current {
    /*color: blue;*/
}
.item-icon-text {
    display:flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

父组件:

 json文件:

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中的select下拉选择组件,是一种常见的界面组件,用于在使用时经常需要从多个选项中选择一个的场景中。 在使用select下拉选择组件时,我们可以通过在wxml文件中使用<picker>标签来定义一个select组件。在<picker>标签中,我们可以设置多个选项,每个选项可以使用<picker-view-column>标签包裹,并在其中使用<picker-view-column-item>标签来定义具体的选项。 例如,如下代码段展示了一个简单的select组件: ``` <picker mode="selector" range="{{array}}" bindchange="bindPickerChange"> <view class="picker"> 当前选择:{{array[index]}} </view> </picker> ``` 在上述代码中,mode属性设置为"selector",表示这是一个select组件。range属性设置为一个数组array,表示下拉菜单中的选项列表。bindchange属性设置为一个处理函数bindPickerChange,表示当选择项改变时执行的函数。在select组件内部,我们还可以使用<view>标签来显示当前选择的选项。 在处理函数bindPickerChange中,可以通过event.detail.value获取当前选择的选项的索引值。我们可以根据这个索引值进行相应的操作,比如更新界面显示、发起请求等。 总结而言,微信小程序的select下拉选择组件是一种实用的界面组件,在我们需要从多个选项中选择一个时非常有用。我们可以通过设置<picker>标签的属性来定义选项,通过处理函数来获取当前选择的选项,并进行相应的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值