uni-app學習記錄05-二級聯動及獲取DOM對象

<template>
    <view>
        <view class="id">
            <view class="left">
                <view v-for="(item, index) in list" :key="index" @click="qiehuan(index)" :class="{ box6: ys == index }">{{ item.title }}</view>
            </view>
            <view class="rigth">
                <!-- :scroll-into-view可以設置讓子菜單滾動 -->
                <scroll-view :scroll-y="true" class="box4" style="height: 200px;" :scroll-into-view="aid" scroll-with-animation @scroll="scroll" @scrolltolower="scrolltolower">
                    <view v-for="(item, index) in list" :key="index" :id="'po' + index" class="tatle">
                        {{ item.title }}
                        <view v-for="(it, idx) in item.list" :key="idx">{{ it }}</view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { title: '華為', list: ['華為1', '華為2', '華為3', '華為4', '華為5', '華為6', '華為7'] },
                { title: '小米', list: ['小米1', '小米2', '小米3', '小米4', '小米5', '小米6', '小米7'] },
                { title: '蘋果', list: ['蘋果1', '蘋果2', '蘋果3', '蘋果4', '蘋果5', '蘋果6', '蘋果7'] },
                { title: '魅族', list: ['魅族1', '魅族2', '魅族3', '魅族4', '魅族5', '魅族6', '魅族7'] },
                { title: '三星', list: ['三星1', '三星2', '三星3', '三星4', '三星5', '三星6', '三星7'] }
            ],
            aid: '',
            ys: '',
            topList: []
        };
    },
    onReady() {
        this.getInfo();
    },
    methods: {
        test(e) {
            // console.log(e.detail.current)
        },
        qiehuan(index) {
            this.aid = 'po' + index;
            this.ys = index;
        },
        scroll(e) {
            // 獲取到每次滑動的坐標top
            let scrollTop = parseInt(e.target.scrollTop);
            // 循環去判斷當前top值處於哪個值 然后左邊隨着滑動
            for (let i = 0; i < this.topList.length; i++) {
                let h1 = this.topList[i];
                let h2 = this.topList[i + 1];
                if (scrollTop >= h1 && scrollTop < h2) {
                    this.ys = i;
                }
            }
        },
        scrolltolower() {
            setTimeout(() => {
                this.ys = 4;
            },80);
        },
        getInfo() {
            // 下面代碼可以獲取元素對象
            const query = uni.createSelectorQuery().in(this);
            query.selectAll('.tatle').boundingClientRect().exec(res => {
                    console.log(res)
                    let nodes = res[0];
                    let rel = [];
                    nodes.map(item => {
                        rel.push(item.top);
                    });
                    this.topList = rel;
                });
        }
    }
};
</script>

<style lang="scss">
swiper {
    height: 240px;
}
.box1 {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: #007aff;
    border: 1px solid red;
}

.box2 {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: #f0f0f0;
    border: 1px solid red;
}

.box3 {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: #00ff00;
    border: 1px solid red;
}
.box5 {
    text-align: center;
    width: 100%;
    height: 100%;
}
.box4 {
    white-space: nowrap;
}
.id {
    display: flex;
    .left {
        width: 100px;
        border: 1px solid red;
    }
    .rigth {
        flex: 1;
    }
}
.box6 {
    background: #4cd964;
}
</style>