chuchu2/components/My_categoryListings/index.js

// components/My_categoryListings/index.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        height: {
            type: String,
            value: '500'
        },
        list: {
            type: Array,
            value: []
        }
    },

    options: {
        addGlobalClass: true
    },

    lifetimes: {
        ready() {}
    },

    /**
     * 组件的初始数据
     */
    data: {
        systemIndex: 0, //系统index
        portIndex: 0, //选择端口Index
        moduleIndex: 0, //选择模块Index
        portID: null, //端口ID
        leftIntoViewId: null,
        rightIntoViewId: null,
        heightList: [],
        modulesIndex: 0, //模块列表
        scrollTop: 0,
        checkList: [], //选中列表
    },

    observers: {
        'list': function (list) {
            console.log(12)
            if (!list.length) return;
            let data = list[0].clients[0];
            let id = data.modules[0] ? "M" + data.modules[0].systemmoduleid : '';
            if (this.data.portID == null) this.setData({
                portID: 'S' + data.systemclientid,
                leftIntoViewId: id,
                rightIntoViewId: id
            })
            setTimeout(() => {
                this.getAppsHeight();
            }, 200)
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        /* 模块选择 */
        checkBack(e) {
            let list = this.data.checkList,
                obj = {
                    id: e.target.id - 0,
                    arr: JSON.parse(JSON.stringify(e.detail.arr))
                };
            const index = list.findIndex(v => v.id == obj.id);
            if (index == -1) {
                list.push(obj)
            } else {
                list.splice(index, 1, obj)
            }
            let idList = e.detail.apps.map(v => v.systemappid);
            const i = list.findIndex(v => v.id == obj.id);
            list[i].arr = list[i].arr.filter(v => idList.includes(v.systemappid));
            this.setData({
                checkList: list
            });
            const mIndex = this.data.list[this.data.systemIndex].clients[this.data.portIndex].modules.findIndex(v => v.systemmoduleid == obj.id);
            this.setData({
                [`list[${this.data.systemIndex}].clients[${this.data.portIndex}].modules[${mIndex}].apps`]: e.detail.apps
            })

        },
        backData() {
            let newArr = [];
            this.data.checkList.forEach(v => newArr = newArr.concat(v.arr));
            return newArr;
        },
        /* 系统分类 */
        changePortID(e) {
            const {
                dataset
            } = e.currentTarget;
            this.setData({
                portID: e.target.id,
                systemIndex: dataset.index,
                portIndex: dataset.i,
                modulesIndex: 0,
                scrollTop: 0
            });
            setTimeout(() => {
                this.getAppsHeight();
            }, 300)
        },
        /* 点击模块分类 */
        changeType(e) {
            this.setData({
                leftIntoViewId: e.target.id,
                rightIntoViewId: e.target.id
            })
        },
        getAppsHeight() {
            const list = this.data.list[this.data.systemIndex].clients[this.data.portIndex].modules,
                that = this;
            let heightList = [];
            let id = 'M' + list[0].systemmoduleid;
            for (let i = 0; i < list.length; i++) {
                let query = wx.createSelectorQuery().in(that).select('.' + 'M1' + list[i].systemmoduleid).boundingClientRect();
                query.exec(res => {
                    if (!res[0]) return this.getAppsHeight();
                    heightList.push(res[0])
                    if (list.length == heightList.length) {
                        this.setData({
                            heightList,
                            leftIntoViewId: id,
                            rightIntoViewId: id
                        })
                        let MyArr = that.selectAllComponents('.My_group');
                        for (let k = 0; k < MyArr.length; k++) {
                            MyArr[k].refactorDom();
                        }
                    }
                })
            };
        },
        viewScroll({
            detail
        }) {
            let arr = this.data.heightList, //获取元素信息
                id = this.data.leftIntoViewId, //获取当前左侧栏选项
                i = arr.findIndex(v => v.id == id), //选项当前在数组中的索引号
                scrollTop = detail.scrollTop,
                //判断当前索引是不是数组最后一条数据，不是的话拿下一个索引的距顶距离
                top = (i + 1 == arr.length) ? arr[i].top - 15 - arr[i].height : arr[i + 1].top - 15 - arr[i + 1].height;
            if (scrollTop >= top) {
                if (!arr[i + 1]) return;
                if (id == arr[i + 1].id) return;
                this.setData({
                    leftIntoViewId: arr[i + 1].id
                })
            } else if (scrollTop < top) {
                if (!arr[i - 1] || id == arr[0].id) return;
                if (scrollTop < Math.abs(arr[i - 1].top - arr[i - 1].height / 2)) this.setData({
                    leftIntoViewId: arr[i - 1].id
                })
            } else {
                if (id == arr[1].id) return; //排除第一个
            }
        },
    }
})