109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
import SButton from "@/components/SButton.vue";
|
|
|
|
import { capsuleHeight } from "@/util";
|
|
|
|
const images = [
|
|
"https://static.shelingxingqiu.com/mall/images/mall_01.jpg",
|
|
"https://static.shelingxingqiu.com/mall/images/mall_02.jpg",
|
|
"https://static.shelingxingqiu.com/mall/images/mall_03.jpg",
|
|
"https://static.shelingxingqiu.com/mall/images/mall_04.jpg",
|
|
"https://static.shelingxingqiu.com/mall/images/mall_05.jpg",
|
|
"https://static.shelingxingqiu.com/mall/images/mall_06.jpg",
|
|
"https://static.shelingxingqiu.com/mall/images/mall_07.jpg",
|
|
"https://static.shelingxingqiu.com/mall/images/mall_08.jpg",
|
|
"https://static.shelingxingqiu.com/mall/images/mall_09.jpg",
|
|
];
|
|
|
|
const addBg = ref(false);
|
|
|
|
const onScrollView = (e) => {
|
|
addBg.value = e.detail.scrollTop > 100;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<view class="container">
|
|
<view
|
|
class="header"
|
|
:style="{
|
|
paddingTop: capsuleHeight + 'px',
|
|
}"
|
|
>
|
|
<image
|
|
:style="{ opacity: addBg ? 1 : 0 }"
|
|
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"
|
|
show-menu-by-longpress
|
|
/>
|
|
</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;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
}
|
|
.header-back {
|
|
width: 22px;
|
|
height: 22px;
|
|
margin: 0px 15px;
|
|
margin-top: 5px;
|
|
position: relative;
|
|
}
|
|
.header > image:first-child {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transition: all 0.5s ease;
|
|
}
|
|
.header > text {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
transition: all 0.5s ease;
|
|
position: relative;
|
|
}
|
|
.images {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.images > image {
|
|
width: 100vw;
|
|
}
|
|
</style>
|