zh_order_food_xcx/pages-takeout/1212.vue

<template>
    <view class="flex-common-css iPhone-bottom box-border-box">
        <Nav :title="school_name"></Nav>
        <image class="bg-img" src="https://sjz-school.oss-cn-chengdu.aliyuncs.com/webImages/bg.png" mode=""></image>
        <view class="q-box z-2" ref="qBox">
            <view v-for="(ball,index) in shopData" :key="index" class="ball flex-direction"
                :style="{ left: ball.x + 'rpx', top: ball.y + 'rpx' }">
                <image class="qp-img" src="/pages-takeout/static/qp.png" mode=""></image>
                <image class="shop-logo z-2 b-rad-20" :src="ball.shop_logo" mode=""></image>
                <view class="fs-24 fc-f z-2 text-overflow-ellipsis-one max-w-118 text-align-center">
                    {{ball.shop_name}}
                </view>
            </view>
        </view>
        <view class="but-box">
            <image class="but-img" src="/pages-takeout/static/but-bg.png" mode=""></image>
            <view class="fs-38 fc-f fw-b text-align-center z-2 pt-49">
                君子帮你选，今日吃点啥？
            </view>
        </view>
        <view class="fs-28 fc-1089D1 text-align-center">
            全部商家随机抽取
        </view>
    </view>
</template>

<script>
    import {
        shopAll
    } from "@/api/shop.js";

    export default {
        components: {},
        data() {
            return {
                school_name: '',
                shopId: 0,
                shopData: [],
                animationFrameId: null,
                animations: []
            };
        },
        onLoad(data) {
            this.school_name = uni.getStorageSync('school_name');
            this.getQBoxSize();
        },
        mounted() {
            this.shopAll();
            this.startAnimation();
        },
        methods: {
            scrolltolower() {
                console.log('触底');
            },
            shopAll() {
                shopAll().then((res) => {
                    if (res.code === 1) {
                        this.shopData = res.data;
                        this.shopData.forEach((v, k) => {
                            const radius = 59; // 小球半径相关大小（这里用宽度等体现，单位rpx）
                            const x = Math.random() * (this.containerWidth - 2 * radius) + radius;
                            const y = Math.random() * (this.containerHeight - 2 * radius) + radius;
                            // 生成更大的速度，范围在 -5 到 5 之间，使小球移动更快
                            const speedX = (Math.random() - 0.5) * 5; 
                            const speedY = (Math.random() - 0.5) * 5; 
                            v.x = x;
                            v.y = y;
                            v.speedX = speedX;
                            v.speedY = speedY;
                            // 为每个小球创建动画实例
                            const animation = uni.createAnimation({
                                duration: 0,
                                timingFunction: 'linear'
                            });
                            this.animations.push(animation);
                            v.animation = animation;
                        });
                        // console.log(this.shopData);
                    }
                });
            },
            startAnimation() {
                const animate = () => {
                    this.updateBalls();
                    // 进一步减小调用间隔，例如 20 毫秒，提高更新频率
                    this.animationFrameId = setTimeout(animate, 20); 
                };
                animate();
            },
            updateBalls() {
                for (const ball of this.shopData) {
                    // 更新小球位置
                    ball.x += ball.speedX;
                    ball.y += ball.speedY;
                    // 处理左右边界碰撞
                    if (ball.x < 0 || ball.x + 2 * 59 > this.containerWidth) {
                        if (ball.x < 0) {
                            ball.x = 0;
                            ball.speedX = Math.abs(ball.speedX);
                        } else {
                            ball.x = this.containerWidth - 2 * 59;
                            ball.speedX = -Math.abs(ball.speedX);
                        }
                    }
                    // 处理上下边界碰撞
                    if (ball.y < 0 || ball.y + 2 * 59 > this.containerHeight) {
                        if (ball.y < 0) {
                            ball.y = 0;
                            ball.speedY = Math.abs(ball.speedY);
                        } else {
                            ball.y = this.containerHeight - 2 * 59;
                            ball.speedY = -Math.abs(ball.speedY);
                        }
                    }
                    // 使用动画更新小球位置
                    ball.animation.translateX(ball.x).translateY(ball.y).step();
                    ball.animation.export();
                    // 直接使用 uni 的动画更新方法
                    uni.createSelectorQuery().in(this).select(`.ball:nth-child(${ball.index + 1})`).boundingClientRect(
                        rect => {
                            if (rect) {
                                ball.animation.export()
                                  .translate(ball.x - rect.left, ball.y - rect.top)
                                  .step()
                                  .update();
                            }
                        }).exec();
                }
                // 利用 Vue 的响应式数据绑定自动更新视图，不再使用 $forceUpdate
            },
            getQBoxSize() {
                uni.createSelectorQuery().in(this).select('.q-box').boundingClientRect((rect) => {
                    if (rect) {
                        this.containerWidth = (rect.width) * 2;
                        this.containerHeight = (rect.height) * 2;
                    }
                }).exec();
            }
        },
        beforeDestroy() {
            // 清除定时器
            clearTimeout(this.animationFrameId);
        }
    }
</script>

<style lang="scss" scoped>
.max-w-118{
        max-width: 118rpx;
    }
.qp-box-ccc {
        background: #ccc;
    }

.z-2 {
        position: relative;
        z-index: 2;
    }

.q-box {
        width: 100%;
        height: 71%;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        position: relative;
    }

.ball {
        width: 118rpx;
        height: 154rpx;
        position: absolute;
        padding-top: 28rpx;
    }

.shop-logo {
        width: 68.5rpx;
        height: 68.5rpx;
        margin: 0 0 34rpx 29rpx;
    }

.bg-img {
        width: 100%;
        height: 89%;
        position: absolute;
        left: 0;
        top: 0;
    }

.but-box {
        width: 100%;
        height: 170rpx;
        position: relative;
    }

.but-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

.pt-49 {
        padding-top: 49rpx;
    }

.qp-img {
        width: 118rpx;
        height: 118rpx;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>