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() {
            /*    setTimeout(() => {
                   this.setData({
                       intoViewId: 'basic1'
                   })
               }, 1000) */
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        result: ['a', 'b'],
        leftIntoViewId: null,
        rightIntoViewId: null,
        heightList: [],
    },

    observers: {
        'list': function (list) {
            if (!list.length) return;
            if (this.data.intoViewId == null) this.setData({
                leftIntoViewId: list[0].system + list[0].systemid,
                rightIntoViewId: list[0].system + list[0].systemid
            })
            setTimeout(() => {
                this.getAppsHeight(list);

            }, 500)
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        /* 点击左侧分类 */
        changeType(e) {
            this.setData({
                leftIntoViewId: e.target.id,
                rightIntoViewId: e.target.id
            })
        },
        getAppsHeight(list) {
            let heightList = [];
            for (let i = 0; i < list.length; i++) {
                let cas = '.' + list[i].system + list[i].systemid;
                let query = wx.createSelectorQuery().in(this).select(cas).boundingClientRect();
                query.exec(res => {
                    if (!res[0]) return this.getAppsHeight(list);
                    heightList.push(res[0])
                    if (heightList.length == list.length) this.setData({
                        heightList
                    })
                })
            }
        },
        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 - 15 - arr[i - 1].height) / 2)) this.setData({
                    leftIntoViewId: arr[i - 1].id
                })
            } else {
                if (id == arr[1].id) return; //排除第一个
            }
        },
    }
})