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>

 

uni-app学习记录05-二级联动及获取DOM对象

上一篇:.NET CORE AutoMapper使用


下一篇:使用Multiplayer Networking做一个简单的多人游戏例子-1/3(Unity3D开发之二十五)