{{content}}s后自动跳转返回**js**data(){ return{ content:3,//默认多少秒开始倒计时 } }, mounted() { this.jumpBack()// }, methods:{ jumpBack(){ var clock = setInterval(()_网页自动延时返回上一页">
当前位置:   article > 正文

倒计时n秒返回上一页或指定页面(定时器)_网页自动延时返回上一页

网页自动延时返回上一页

**主要就是一个定时器3s之后返回上一页功能

html**

<view class="back">{{content}}s后自动跳转返回</view>
  • 1

**

js

**

data(){
			return{			
				content:3,//默认多少秒开始倒计时
			}
		},
		mounted() {
			this.jumpBack()//
		},
		methods:{
			jumpBack(){		
				var clock = setInterval(() => {//定时器开始
					this.content=this.content-1;
					if (this.content < 1) {//当倒计时小于1秒后,就跳转到上一页
						let pages = getCurrentPages(); //获取页面栈
						     //获取到返回的页面下标
						     let pageIndex = pages.findIndex((findItem)=>{
						     return findItem.route==='subPages/index/index' /* 需返回的页面路由
						 })
						uni.navigateBack({//此处是用uni-app 写的,如果是vue中可以只用用路由跳转或者this.$router.go(-1)跳转到上一页或者this.$router.push('XX')跳转到指定页面
						//此处uni-app写的跳转上一页也可以改成delta:-1
							delta:(pages.length-(pageIndex+1)),animationType:'slide-out-right',
						})
						clearInterval(clock)//清空定时器
					}					
				}, 1000)
			}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

效果图

在这里插入图片描述

注:

次功能主要就是一个定时器然后倒计时到0时跳转到上一页,或者指定页面。
此处我是用uni-app 写的到指定页面,如果是在vue 中跳转到上一页可以用this.$router.go(-1)或者直接路由到指定页面 (上面代码中有注释)

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/824625
推荐阅读
相关标签
  

闽ICP备14008679号