MD_YOSwechat/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
        result: ['a', 'b'],
        portID: null, //端口ID
        leftIntoViewId: null,
        rightIntoViewId: null,
        heightList: [],
        modulesIndex: 0, //模块列表
        scrollTop: 0
    },

    observers: {
        'list': function (list) {
            if (!list.length) return;
            let data = list[0].clients[0];
            console.log("list", list)
            console.log("data", data)
            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: {
        /* 系统分类 */
        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
                    })
                })
            }
        },

        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 + 80)) this.setData({
                    leftIntoViewId: arr[i - 1].id
                })
            } else {
                if (id == arr[1].id) return; //排除第一个
            }
        },
    }
})