更新记录

1.0.1（2024-03-22）

• 优化代码

1.0.0（2024-03-20）

0.1.0（2024-03-20）

• 初始化-gck

平台兼容性

使用说明

示例代码 ，请参考

引入组件

<template>
    <view>   
        <genealogicalTree :dataArr="treeData"></genealogicalTree>
    </view>
</template>

<script>
    import genealogicalTree from "@/uni_modules/genealogical-tree/components/genealogical-tree/genealogical-tree.vue"
    export default {
        components:{
            genealogicalTree
        },
        data() {
            return {
                treeData: [{
                    name: '张三',
                    sex: 1,// 1儿子-2女儿；
                    generation:1,
                    spouse: [{
                        name: "张三四"
                    }],
                    children: [{
                        name: '张四',
                        sex: 2,
                        generation:2,
                        spouse: [{
                            name: "一老公"
                        }, {
                            name: "二老公"
                        }],
                        children: [{
                            name: '张四',
                            sex: 1,
                            generation:3,
                            spouse: [{
                                name: "三夫人"
                            }],
                        }]
                    }]
                }],
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

页面容器采用的是movable-view，如需要调整移动方向、放大缩小，拖动事件等。请自行到genealogical-tree组件里面修改

genealogical-tree组件页面

<template>
    <view class="main">
        <movable-area class="tree" :style="'width:'+screen.width+'px;height:'+screen.height+'px;'">
            <movable-view inertia class="canvas"  :style="'width:'+screen.width*14+'px;height:'+screen.height*14+'px;'"  direction="all" out-of-bounds :x="-screen.width*6.5">
                <node :data="treeData" isTop></node>
            </movable-view>
        </movable-area>

    </view>
</template>

<script>
    /**
     * movable-view 属性 也可自行查看官方文档
     * 属性名           类型           默认值                           说明
     *  direction         String         none      movable-view的移动方向，属性值有all、vertical、horizontal、none   
        inertia          Boolean          false    movable-view是否带有惯性   
        out-of-bounds    Boolean         false     超过可移动区域后，movable-view是否还可以移动 
        x             Number / String             定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画    
        y            Number / String              定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画    
        damping       Number              20       阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快   360小程序不支持
        friction     Number               2     摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值   360小程序不支持
        disabled    Boolean             false   是否禁用    
        scale       Boolean             false   是否支持双指缩放，默认缩放手势生效区域是在movable-view内  360小程序不支持
        scale-min   Number              0.5 定义缩放倍数最小值   
        scale-max   Number              10  定义缩放倍数最大值   
        scale-value Number              1   定义缩放倍数，取值范围为 0.5 - 10   
        animation   Boolean             true    是否使用动画  
        @change EventHandle     拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）  
        @scale  EventHandle     缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，
    */
    import node from "./node.vue"
    export default {
        name: 'genealogical-tree',
        components: {
            node
        },
        props: {
            //传入的数据
            dataArr: {  
                type: Array,
                default: ()=>{
                    return []
                }
            }
        },
        watch: {
            dataArr: {
                handler(newData, old) {
                    if(Array.isArray(newData)){
                        this.treeData =newData;
                    }
                },

                immediate: true
            }
        },
        data() {
            return {
                screen: {
                    height: 1920,
                    width: 1080
                },
                treeData: [],

            }
        },
        created(){
            if(this.dataArr.length!=0){
                this.treeData =this.dataArr;
            }
        },
        mounted() {
            let system = uni.getSystemInfoSync()
            this.screen = {
                height: system.screenHeight,
                width: system.screenWidth
            }

        },

        methods: {
            (e) {
                console.log(e)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .tree{
        overflow: hidden;
    }
    .main{
    background: #f7f3e8;
    }
</style>