chenkainan
/
shanjuandong
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://123.60.98.226:3000/chenkainan/shanjuandong

master
jiazhipeng 4 months ago
parent
172f0e1c5f 715ee9897b
commit
28f8ac0e91
1 changed files with 126 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 174
      pages/index/index.vue

174
pages/index/index.vue
View File

@ -1,45 +1,45 @@
<template> <template>
<view class="bg"> <view class="bg">
<!-- <view class="content" :style="{backgroundImage: 'url('+imgSrc+')'}" @click="click" <!-- 第一页 -->
@touchstart="touchStart" @touchend="touchEnd"></view> --> <view :class="['content', 'content_bg', {'content-first': isFlipFade}]"
style="background-image: url(/static/1/1.png);" v-show="currentPage === 0">
<view class="content content_bg" style="background-image: url(/static/1/1.png);" v-show="number == 0"> <image src="/static/1/1btn.png" class="btn_1" @click="handleFirstPageClick"></image>
<!-- <image class="bg-image" src="/static/1/1.png" mode="widthFix"></image> -->
<image src="/static/1/1btn.png" class="btn_1" @click="click"></image>
</view> </view>
<view class="content content_2" v-show="number == 1"> <!-- 加载页 -->
<image class="title_2" src="/static/1/2title.png" ></image> <view class="content content_2" v-show="currentPage === 1">
<image class="title_2" src="/static/1/2title.png"></image>
<view class="progress-container"> <view class="progress-container">
<view class="progress" :style="{'width':progressNum+'%'}"> <view class="progress" :style="{'width': progressPercentage + '%'}">
<image class="dongxiao" src="/static/1/loading.png"></image> <image class="dongxiao" src="/static/1/loading.png"></image>
</view> </view>
</view> </view>
<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressNum}}%</view> <view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressPercentage}}%</view>
</view> </view>
<view class="content content_bg" v-show="number == 2" @click="click" <!-- 第二页 -->
@touchstart="touchStart" @touchend="touchEnd"> <view class="content content_bg" v-show="currentPage === 2" @click="handlePageClick"
<!-- <image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image> --> @touchstart="handleTouchStart" @touchend="handleTouchEnd">
<swiper class="swiper-box" style="height: 100%;" :vertical="true"> <swiper class="swiper-box" style="height: 100%;" :vertical="true">
<swiper-item style="position: relative;"> <swiper-item style="position: relative;">
<!-- <image class="bg-image" src="/static/1/2.png" mode="widthFix"></image> -->
<image class="bg-image" src="/static/1/2.png" style="height: 100%;"></image> <image class="bg-image" src="/static/1/2.png" style="height: 100%;"></image>
<image style="position: absolute;left: 349rpx;bottom: 187rpx;width: 49rpx;height: 30rpx;" src="/static/1/arrow.png"></image> <image style="position: absolute;left: 349rpx;bottom: 187rpx;width: 49rpx;height: 30rpx;"
src="/static/1/arrow.png"></image>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<!-- 天生有善 后生友善 按钮 --> <!-- 第三页 -->
<view class="content" v-show="number == 3"> <view class="content" v-show="currentPage === 3">
<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image> <image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
<view class="btn-box" > <view class="btn-box">
<image src="/static/1/btn1.png" mode="" class="btn1"></image> <image src="/static/1/btn1.png" mode="" class="btn1"></image>
<image src="/static/1/btn2.png" mode="" class="btn2" @click="gotoPath('/pages/index/tiansheng')"></image> <image src="/static/1/btn2.png" mode="" class="btn2" @click="navigateToPage('/pages/index/tiansheng')">
<image src="/static/1/btn3.png" mode="" class="btn2" @click="gotoPath('/pages/index/dongLing')" style="left: 449rpx;"></image> </image>
<image src="/static/1/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')"
style="left: 449rpx;"></image>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
@ -47,106 +47,135 @@
export default { export default {
data() { data() {
return { return {
imgSrc: require('static/1/1.png'), progressPercentage: 0,
progressNum: 0, currentPage: 0,
number: 0, startTouchY: 0,
startY: 0, isFlipFade: false,
} progressTimer: null
};
}, },
onLoad() { onLoad() {
// 页面加载时的逻辑
}, },
methods: { methods: {
gotoPath(url) { // 跳转到指定页面
navigateToPage(url) {
uni.navigateTo({ uni.navigateTo({
url: url, url: url,
}) })
}, },
click() { // 处理第一页按钮点击事件
this.number += 1 handleFirstPageClick() {
switch (this.number){ this.isFlipFade = true;
setTimeout(() => {
this.handlePageClick();
}, 1500);
},
// 处理页面点击事件
handlePageClick() {
this.currentPage++;
this.updatePageContent();
},
// 根据当前页面更新内容
updatePageContent() {
switch (this.currentPage) {
case 1: case 1:
this.startProgress() this.startProgress();
break; break;
case 2: case 2:
this.imgSrc = require('static/1/2.png') // 这里可以添加第二页的特殊逻辑
break; break;
case 3: case 3:
this.imgSrc = require('static/1/3.png') // 这里可以添加第三页的特殊逻辑
break; break;
default: default:
break; break;
} }
}, },
// 开始加载进度条
startProgress() { startProgress() {
let timer = setInterval(()=>{ this.progressTimer = setInterval(() => {
this.progressNum++ this.progressPercentage++;
if (this.progressNum>=100) { if (this.progressPercentage >= 100) {
this.progressNum = 100 this.progressPercentage = 100;
clearInterval(timer) clearInterval(this.progressTimer);
this.number = 2 this.currentPage = 2;
} }
},10) }, 10);
}, },
touchStart(e) { // 处理触摸开始事件
this.startY = e.changedTouches[0].clientY; handleTouchStart(e) {
this.startTouchY = e.changedTouches[0].clientY;
}, },
touchEnd(e) { // 处理触摸结束事件
handleTouchEnd(e) {
const endY = e.changedTouches[0].clientY; const endY = e.changedTouches[0].clientY;
const distanceY = this.startY - endY; const distanceY = this.startTouchY - endY;
if (distanceY > 50 && this.number == 2) { if (distanceY > 50 && this.currentPage === 2) {
console.log('上滑操作触发'); console.log('上滑操作触发');
setTimeout(()=>{this.click()},100) setTimeout(() => {
this.handlePageClick();
// 在此处编写上滑操作执行的逻辑 }, 100);
}
} }
}, },
beforeDestroy() {
// 组件销毁前清除定时器
if (this.progressTimer) {
clearInterval(this.progressTimer);
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bg{ .bg {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
font-size: 0; font-size: 0;
background: black; background: black;
} }
.content { .content {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
position: relative; position: relative;
.bg-image{
.bg-image {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
height: auto; height: auto;
} }
.btn_1{
.btn_1 {
width: 569rpx; width: 569rpx;
height: 74rpx; height: 74rpx;
position: absolute; position: absolute;
bottom: 68rpx; bottom: 68rpx;
left: 95rpx; left: 95rpx;
} }
&.content_2{
&.content_2 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.title_2{
.title_2 {
width: 65rpx; width: 65rpx;
height: 76rpx; height: 76rpx;
} }
.progress-container{
.progress-container {
width: 387rpx; width: 387rpx;
height: 24rpx; height: 24rpx;
border-radius: 20rpx; border-radius: 20rpx;
border: 2px solid #8F76EE; border: 2px solid #8F76EE;
margin: 26rpx 0; margin: 26rpx 0;
.progress{ .progress {
height: 100%; height: 100%;
background: rgba(143,118,238,0.3); background: rgba(143, 118, 238, 0.3);
border-radius: 20rpx; border-radius: 20rpx;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
@ -157,11 +186,13 @@
} }
.content_bg{
.content_bg {
height: 100vh; height: 100vh;
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.btn-box { .btn-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -188,13 +219,15 @@
left: 78rpx; left: 78rpx;
} }
} }
.dongxiao{
.dongxiao {
position: absolute; position: absolute;
right: 0; right: 0;
height: 100%; height: 100%;
width: 158rpx; width: 158rpx;
} }
.swiper-box{
.swiper-box {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -203,4 +236,23 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.content-first {
animation: flipFade 2s forwards;
opacity: 1;
transform: rotateY(0deg);
}
/* 定义动画 */
@keyframes flipFade {
0% {
opacity: 1;
transform: rotateY(0deg);
}
100% {
opacity: 0;
transform: rotateY(180deg);
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save