shoot-miniprograms/src/pages/device-intro.vue

<script setup>
import { ref, onMounted } from "vue";
import SButton from "@/components/SButton.vue";

const images = [
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmf6yitekatwe.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmi475gqdtrvx.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmgy8ej5wuap5.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmg6y7nveaadv.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmfhqew0xhy6i.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmhs38abrqfyp.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmgnj4rttovk3.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmg68a8mezgzx.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjxso9mmiacpmhgrc.jpg",
];

const addBg = ref("");
const capsuleHeight = ref(0);
onMounted(async () => {
  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
  capsuleHeight.value = menuBtnInfo.top - 9;
});

const onScrollView = (e) => {
  addBg.value = e.detail.scrollTop > 100;
};
</script>

<template>
  <view class="container">
    <view
      class="header"
      :style="{
        paddingTop: capsuleHeight + 'px',
      }"
    >
      <image
        v-if="addBg"
        class="bg-image"
        src="../static/app-bg.png"
        mode="widthFix"
      />
      <navigator open-type="navigateBack">
        <image class="header-back" src="../static/back.png" mode="widthFix" />
      </navigator>
      <text
        :style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
      >
        本赛季排行榜
      </text>
    </view>
    <scroll-view scroll-y @scroll="onScrollView" :style="{ height: '100vh' }">
      <view class="images">
        <image v-for="src in images" :key="src" :src="src" mode="widthFix" />
      </view>
    </scroll-view>
  </view>
</template>

<style scoped>
.container {
  width: 100%;
}
.header-bg {
  width: 100%;
}
.header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  transition: all 0.3s ease;
  z-index: 10;
  overflow: hidden;
}
.header-back {
  width: 22px;
  height: 22px;
  margin: 0px 15px;
  margin-top: 5px;
  position: relative;
}
.bg-image {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
.images {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.images > image {
  width: 100vw;
}
</style>