chenkainan
4 months ago
1 changed files with 238 additions and 193 deletions
@ -1,200 +1,245 @@ |
|||||
<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-first': isFlipFade}]" v-show="currentPage === 0"> |
||||
|
<image class="bg-image" src="/static/1/1.png" mode="widthFix"></image> |
||||
<view class="content" 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> |
</view> |
||||
<image src="/static/1/1btn.png" class="btn_1" @click="click"></image> |
|
||||
</view> |
<!-- 加载页 --> |
||||
|
<view class="content content_2" v-show="currentPage === 1"> |
||||
<view class="content content_2" v-show="number == 1"> |
<image class="title_2" src="/static/1/2title.png"></image> |
||||
<image class="title_2" src="/static/1/2title.png" ></image> |
<view class="progress-container"> |
||||
<view class="progress-container"> |
<view class="progress" :style="{'width': progressPercentage + '%'}"> |
||||
<view class="progress" :style="{'width':progressNum+'%'}"> |
<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;">{{progressPercentage}}%</view> |
||||
<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressNum}}%</view> |
</view> |
||||
</view> |
|
||||
|
<!-- 第二页 --> |
||||
<view class="content" v-show="number == 2" @click="click" |
<view class="content" v-show="currentPage === 2" @click="handlePageClick" @touchstart="handleTouchStart" @touchend="handleTouchEnd"> |
||||
@touchstart="touchStart" @touchend="touchEnd"> |
<image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image> |
||||
<image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image> |
<swiper class="swiper-box" :vertical="true"> |
||||
<swiper class="swiper-box" :vertical="true"> |
<swiper-item> |
||||
<swiper-item > |
<image class="bg-image" src="/static/1/2.png" mode="widthFix"></image> |
||||
<image class="bg-image" src="/static/1/2.png" mode="widthFix"></image> |
</swiper-item> |
||||
</swiper-item> |
</swiper> |
||||
</swiper> |
</view> |
||||
</view> |
|
||||
|
<!-- 第三页 --> |
||||
<!-- 天生有善 后生友善 按钮 --> |
<view class="content" v-show="currentPage === 3"> |
||||
<view class="content" v-show="number == 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="navigateToPage('/pages/index/tiansheng')"></image> |
||||
<image src="/static/1/btn2.png" mode="" class="btn2" @click="gotoPath('/pages/index/tiansheng')"></image> |
<image src="/static/1/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')" style="left: 449rpx;"></image> |
||||
<image src="/static/1/btn3.png" mode="" class="btn2" @click="gotoPath('/pages/index/dongLing')" style="left: 449rpx;"></image> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
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: { |
}, |
||||
gotoPath(url) { |
methods: { |
||||
uni.navigateTo({ |
// 跳转到指定页面 |
||||
url: url |
navigateToPage(url) { |
||||
}) |
uni.navigateTo({ |
||||
}, |
url |
||||
click() { |
}); |
||||
this.number += 1 |
}, |
||||
switch (this.number){ |
// 处理第一页按钮点击事件 |
||||
case 1: |
handleFirstPageClick() { |
||||
this.startProgress() |
this.isFlipFade = true; |
||||
break; |
setTimeout(() => { |
||||
case 2: |
this.handlePageClick(); |
||||
this.imgSrc = require('static/1/2.png') |
}, 1500); |
||||
break; |
}, |
||||
case 3: |
// 处理页面点击事件 |
||||
this.imgSrc = require('static/1/3.png') |
handlePageClick() { |
||||
break; |
this.currentPage++; |
||||
default: |
this.updatePageContent(); |
||||
break; |
}, |
||||
} |
// 根据当前页面更新内容 |
||||
}, |
updatePageContent() { |
||||
startProgress() { |
switch (this.currentPage) { |
||||
let timer = setInterval(()=>{ |
case 1: |
||||
this.progressNum++ |
this.startProgress(); |
||||
if (this.progressNum>=100) { |
break; |
||||
this.progressNum = 100 |
case 2: |
||||
clearInterval(timer) |
// 这里可以添加第二页的特殊逻辑 |
||||
this.number = 2 |
break; |
||||
} |
case 3: |
||||
},10) |
// 这里可以添加第三页的特殊逻辑 |
||||
}, |
break; |
||||
touchStart(e) { |
default: |
||||
this.startY = e.changedTouches[0].clientY; |
break; |
||||
}, |
} |
||||
touchEnd(e) { |
}, |
||||
const endY = e.changedTouches[0].clientY; |
// 开始加载进度条 |
||||
const distanceY = this.startY - endY; |
startProgress() { |
||||
if (distanceY > 50 && this.number == 2) { |
this.progressTimer = setInterval(() => { |
||||
console.log('上滑操作触发'); |
this.progressPercentage++; |
||||
setTimeout(()=>{this.click()},100) |
if (this.progressPercentage >= 100) { |
||||
|
this.progressPercentage = 100; |
||||
// 在此处编写上滑操作执行的逻辑 |
clearInterval(this.progressTimer); |
||||
} |
this.currentPage = 2; |
||||
}, |
} |
||||
} |
}, 10); |
||||
} |
}, |
||||
|
// 处理触摸开始事件 |
||||
|
handleTouchStart(e) { |
||||
|
this.startTouchY = e.changedTouches[0].clientY; |
||||
|
}, |
||||
|
// 处理触摸结束事件 |
||||
|
handleTouchEnd(e) { |
||||
|
const endY = e.changedTouches[0].clientY; |
||||
|
const distanceY = this.startTouchY - endY; |
||||
|
if (distanceY > 50 && this.currentPage === 2) { |
||||
|
console.log('上滑操作触发'); |
||||
|
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 { |
|
||||
width: 100%; |
.content { |
||||
min-height: 100vh; |
width: 100%; |
||||
position: relative; |
min-height: 100vh; |
||||
.bg-image{ |
position: relative; |
||||
width: 100%; |
|
||||
min-height: 100vh; |
.bg-image { |
||||
height: auto; |
width: 100%; |
||||
} |
min-height: 100vh; |
||||
.btn_1{ |
height: auto; |
||||
width: 569rpx; |
} |
||||
height: 74rpx; |
|
||||
position: absolute; |
.btn_1 { |
||||
bottom: 68rpx; |
width: 569rpx; |
||||
left: 95rpx; |
height: 74rpx; |
||||
} |
position: absolute; |
||||
&.content_2{ |
bottom: 68rpx; |
||||
display: flex; |
left: 95rpx; |
||||
flex-direction: column; |
} |
||||
align-items: center; |
|
||||
justify-content: center; |
&.content_2 { |
||||
.title_2{ |
display: flex; |
||||
width: 65rpx; |
flex-direction: column; |
||||
height: 76rpx; |
align-items: center; |
||||
} |
justify-content: center; |
||||
.progress-container{ |
|
||||
width: 387rpx; |
.title_2 { |
||||
height: 24rpx; |
width: 65rpx; |
||||
border-radius: 20rpx; |
height: 76rpx; |
||||
border: 2px solid #8F76EE; |
} |
||||
margin: 26rpx 0; |
|
||||
|
.progress-container { |
||||
.progress{ |
width: 387rpx; |
||||
height: 100%; |
height: 24rpx; |
||||
background: rgba(143,118,238,0.3); |
border-radius: 20rpx; |
||||
border-radius: 20rpx; |
border: 2px solid #8F76EE; |
||||
width: 0; |
margin: 26rpx 0; |
||||
overflow: hidden; |
|
||||
position: relative; |
.progress { |
||||
} |
height: 100%; |
||||
} |
background: rgba(143, 118, 238, 0.3); |
||||
} |
border-radius: 20rpx; |
||||
|
width: 0; |
||||
|
overflow: hidden; |
||||
} |
position: relative; |
||||
|
} |
||||
.btn-box { |
} |
||||
width: 100%; |
} |
||||
height: 100%; |
} |
||||
position: absolute; |
|
||||
left: 0; |
.btn-box { |
||||
bottom: 0; |
width: 100%; |
||||
|
height: 100%; |
||||
image { |
position: absolute; |
||||
position: absolute; |
left: 0; |
||||
} |
bottom: 0; |
||||
|
|
||||
|
image { |
||||
.btn1 { |
position: absolute; |
||||
width: 298rpx; |
} |
||||
height: 62rpx; |
|
||||
top: 810rpx; |
.btn1 { |
||||
left: 229rpx; |
width: 298rpx; |
||||
} |
height: 62rpx; |
||||
|
top: 810rpx; |
||||
.btn2 { |
left: 229rpx; |
||||
width: 243rpx; |
} |
||||
height: 74rpx; |
|
||||
bottom: 223rpx; |
.btn2 { |
||||
left: 78rpx; |
width: 243rpx; |
||||
} |
height: 74rpx; |
||||
} |
bottom: 223rpx; |
||||
.dongxiao{ |
left: 78rpx; |
||||
position: absolute; |
} |
||||
right: 0; |
} |
||||
height: 100%; |
|
||||
width: 158rpx; |
.dongxiao { |
||||
} |
position: absolute; |
||||
.swiper-box{ |
right: 0; |
||||
position: absolute; |
height: 100%; |
||||
top: 0; |
width: 158rpx; |
||||
bottom: 0; |
} |
||||
right: 0; |
|
||||
left: 0; |
.swiper-box { |
||||
width: 100%; |
position: absolute; |
||||
height: 100%; |
top: 0; |
||||
} |
bottom: 0; |
||||
</style> |
right: 0; |
||||
|
left: 0; |
||||
|
width: 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> |
||||
Loading…
Reference in new issue