diff --git a/pages/index/index.vue b/pages/index/index.vue
index 3ad6485..e73be82 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,45 +1,45 @@
-
-
-
-
-
+
+
+
-
-
-
+
+
+
+
-
+
- {{progressNum}}%
+ {{progressPercentage}}%
-
-
-
+
+
+
-
-
+
-
-
-
+
+
+
-
+
-
-
+
+
+
-
@@ -47,106 +47,135 @@
export default {
data() {
return {
- imgSrc: require('static/1/1.png'),
- progressNum: 0,
- number: 0,
- startY: 0,
- }
+ progressPercentage: 0,
+ currentPage: 0,
+ startTouchY: 0,
+ isFlipFade: false,
+ progressTimer: null
+ };
},
onLoad() {
-
+ // 页面加载时的逻辑
},
methods: {
- gotoPath(url) {
+ // 跳转到指定页面
+ navigateToPage(url) {
uni.navigateTo({
url: url,
})
},
- click() {
- this.number += 1
- switch (this.number){
+ // 处理第一页按钮点击事件
+ handleFirstPageClick() {
+ this.isFlipFade = true;
+ setTimeout(() => {
+ this.handlePageClick();
+ }, 1500);
+ },
+ // 处理页面点击事件
+ handlePageClick() {
+ this.currentPage++;
+ this.updatePageContent();
+ },
+ // 根据当前页面更新内容
+ updatePageContent() {
+ switch (this.currentPage) {
case 1:
- this.startProgress()
+ this.startProgress();
break;
case 2:
- this.imgSrc = require('static/1/2.png')
+ // 这里可以添加第二页的特殊逻辑
break;
case 3:
- this.imgSrc = require('static/1/3.png')
+ // 这里可以添加第三页的特殊逻辑
break;
default:
break;
}
},
+ // 开始加载进度条
startProgress() {
- let timer = setInterval(()=>{
- this.progressNum++
- if (this.progressNum>=100) {
- this.progressNum = 100
- clearInterval(timer)
- this.number = 2
+ this.progressTimer = setInterval(() => {
+ this.progressPercentage++;
+ if (this.progressPercentage >= 100) {
+ this.progressPercentage = 100;
+ clearInterval(this.progressTimer);
+ 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 distanceY = this.startY - endY;
- if (distanceY > 50 && this.number == 2) {
+ const distanceY = this.startTouchY - endY;
+ if (distanceY > 50 && this.currentPage === 2) {
console.log('上滑操作触发');
- setTimeout(()=>{this.click()},100)
-
- // 在此处编写上滑操作执行的逻辑
+ setTimeout(() => {
+ this.handlePageClick();
+ }, 100);
}
- },
+ }
+ },
+ beforeDestroy() {
+ // 组件销毁前清除定时器
+ if (this.progressTimer) {
+ clearInterval(this.progressTimer);
+ }
}
- }
+ };
+
+ .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);
+ }
+ }
+
\ No newline at end of file