vue03 uniapp菜单关联

<template>
    <view style="position: fixed; top: 0; width: 100%; height: 100%;">
        <scroll-view scroll-x style="width: 100%;">
            <view style="display: flex;">
                <view @click="painta(index)" v-for="(item,index) in data.arrty" style="padding: 20rpx;">
                    <view :class="ids==index?'centera':'centert'">
                        {{item.name}}
                    </view>
                </view>
            </view>
        </scroll-view>
        <scroll-view @scroll='scroll' scroll-y style="height: 100%;" scroll-with-animation :scroll-top="data.number">
            <view v-for="(item,index) in data.arrty" :id="'paintat'+index">
                <view>{{item.name}}</view>
                <view v-for="node in item.arrtys" class="painta">
                    <image :src='node.image'></image>
                    <view class="fleir">
                        <view class="paint" @click="apint(node)">+</view>
                    </view>
                    <view v-if="node.folt" class="fleir" :class="{'flei':node.folt}" id="id">
                        <view class="paint" :class="{'paints':node.folt}">+</view>
                    </view>
                </view>
            </view>
            <view style="width: 100%; height: 90rpx;"></view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
    import { onLoad } from '@dcloudio/uni-app';
    import { ref, getCurrentInstance, reactive, nextTick } from 'vue';
    import ctx from '@/mitt/index';
    let arr = reactive<any>([]);
    let ids = ref<number>(0);
    let data = reactive<any>({
        number: 0,
        arrty: [
            {
                id: 1, name: '商品名称1', arrtys: [
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                ]
            },
            {
                id: 2, name: '商品名称2', arrtys: [
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' }
                ]
            },
            {
                id: 3, name: '商品名称3', arrtys: [
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                ]
            },
            {
                id: 4, name: '商品名称4', arrtys: [
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                ]
            },
            {
                id: 5, name: '商品名称5', arrtys: [
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                ]
            },
            {
                id: 3, name: '商品名称3', arrtys: [
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                    { image: 'http://qiniu.shoulongdao.vip/1/material/d3b703bb-f3f7-49ef-8056-bfd1b864bb63.png' },
                ]
            },
        ]
    })
    let folt = ref<boolean>(false);
    let tish = getCurrentInstance();
    function apint(item : any) {
        item.folt = true;
        setTimeout(() => {
            item.folt = false;
        }, 700)
    }
    function paint() {
        data.arrty.forEach((item, index) => {
            const query = uni.createSelectorQuery().in(tish);
            query.select('#paintat' + index).boundingClientRect(item => {
                arr.push(item.top);
            }).exec();
        })
    }
    async function painta(index) {
        data.number = 0;
        setTimeout(() => {
            data.number = arr[index] - 57;
        })
    }
    function scroll(e) {
        setTimeout(() => {
            arr.forEach((item, index) => {
                console.log(e);
                if (e.target.scrollTop >= (arr[index] - 97)) {
                    ids.value = index;
                }
            })
        }, 100)
    }
    onLoad(() => {
        paint();
        ctx.off('ponts');
        ctx.on('ponts', (item : any) => {
            console.log(item);
        });
    })
</script>

<style lang="scss">
    .painta {
        width: 680rpx;
        background: #fff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 10rpx;
        margin: auto;
        margin-bottom: 30rpx;
        margin-top: 60rpx;
        position: relative;
    }

    .centera {
        color: red;
        white-space: nowrap;
    }

    .centert {
        color: #000;
        white-space: nowrap;
    }

    .fleir {
        position: absolute;
        z-index: 10;
        bottom: 10rpx;
    }

    .flei {
        animation: slidein 0.7s infinite cubic-bezier(0.5, -0.5, 1, 1);
    }

    @keyframes slidein {
        from {
            transform: translateY(0%);
        }

        to {
            transform: translateY(1200rpx);
        }
    }

    .paint {
        background-color: blue;
        display: inline-block;
        padding: 20rpx;
        width: 50rpx;
        height: 50rpx;
        color: #fff;
        border-radius: 50rpx;
        text-align: center;
        line-height: 47rpx;
    }

    .paints {
        animation: apit 0.7s infinite;
    }

    @keyframes apit {
        from {
            transform: translateX(0%);
        }

        to {
            transform: translateX(500rpx);
        }
    }
</style>