mini-h5/src/pages/index/index.vue

<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view>
    <view id="lottieContainer" class="box"></view>
    <button @click="show = !show">Solana Wallet</button>
    <Dialog v-model:show-value="show" position="top" width="100%"></Dialog>
    <button>1</button>
  </view>
</template>
<script setup lang="ts">
import { useLaunchParams } from '@telegram-apps/sdk-vue'
import lottie from 'lottie-web'
import animationData from '@/static/Animation.json'
import Dialog from '@/components/common/Dialog/index.vue'
import { useUserStore } from '@/store/user'
import { getShareCode } from '@/service/team'
const pl = useLaunchParams()
const useStore = useUserStore()
const show = ref(false)

const initUser = async (user: any, shareCode: string) => {
  const data = await useStore.setUserInfo(user, shareCode)
}

onShow(async () => {
  await initUser(pl.initData.user, uni.getStorageSync('shareCode') || '')
  const { data } = await getShareCode()
  nextTick(() => {
    const query = uni.createSelectorQuery()
    query
      .select('#lottieContainer')
      .boundingClientRect((rect) => {
        if (rect) {
          lottie.loadAnimation({
            container: document.getElementById('lottieContainer'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData,
          })
        } else {
          console.error('Container element not found')
        }
      })
      .exec()
  })
})
</script>

<style lang="scss" scoped>
.box {
  width: 690rpx;
  height: 500rpx;
  overflow: hidden; /* 如果动画超出容器大小，确保它不会溢出 */
}
</style>