微信小程序设置支付返回达到计时效果

本文链接:https://blog.csdn.net/qq_40236722/article/details/98169847

很多时候,我们在微信小程序中需要让它过了一段时间自动执行一个方法,这个时候我们就需要利用setInterval来设置定时器。

number setInterval(function callback, number delay, any rest)

设定一个定时器。按照指定的周期(以毫秒计)来执行注册的回调函数

参数

function callback

回调函数

number delay

执行回调函数之间的时间间隔,单位 ms。

any rest

param1, param2, …, paramN 等附加参数,它们会作为参数传递给回调函数。

返回值

number

定时器的编号。这个值可以传递给 clearInterval 来取消该定时。

以上内容来自小程序微信官方文档

说了这么多,接下来直接看我写的代码吧。

wxml代码如下:

<view class="container">

  <image class="icon" src="/image/menu/paySuccess.png" />

  <view class="tip">订单提交成功,点击确定立即至订单列表页</view>

  <view class="timing">{{time}}s<text>后自动返回</text>

  </view>

  <button class="btn_submit" catchtap="paySuccessSubmit">确定</button>

</view>


js关键部分代码如下:

  /**

  * 页面的初始数据

  */

  data: {

    time: 5,

  },

      /**

      * 生命周期函数--监听页面加载

      */

      onLoad: function(options) {

        this.setTime()

      },

      // 设置计时器

      setTime(){

        let that = this

        let myTime = setInterval(function () {

          that.setData({

            time: that.data.time - 1

          })

          if (that.data.time == 0) {

            clearInterval(myTime)

            wx.navigateTo({

            url:''

            })

          }

        }, 1000)

      },



首先讲一下我的思路

刚开始data里定义time给他初始值5,然后每过个一秒钟让time减1,等到time变成0再清除计时器,并且让他自动跳到其他页面。

实现效果如下:

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容