美文网首页
微信小程序连续点击按钮导致多次跳转页面

微信小程序连续点击按钮导致多次跳转页面

作者: 美丽的灬一天 | 来源:发表于2018-03-21 14:04 被阅读0次

    最近因为公司需要接触到微信小程序开发,对本人来说转变还是蛮大的毕竟我主要是开发iOS的,也是经历了微信小程序从入门到放弃(。。。)的过程。首先,什么都不知道的情况下肯定是先看官方文档。按照文档配置完之后就开始写了,这里主要说一下我在开发过程中遇到的一个问题。

    其实问题就是在view标签中(button也可以)添加了一个bindtap点击方法,点击跳转页面,对没错就是这么简单!(我用的是sublime,没用微信开发者工具)


    点击方法
    跳转页面

    那么问题来了,当你连续点击两次的时候会跳转两次,连续多次点击直接就崩了,返回就是空白页,这在实际使用中是非常影响用户体验的。比如当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况。查看文档无果,上网查阅资料大部分都是用前端Web知识解决的,作为一个小白很苦恼。

    解决办法
    函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数。废话不多说,直接上代码。
    /utils/util.js(工具类):

        if (gapTime == null || gapTime == undefined) {
          gapTime = 1500
        }
        let _lastTime = null
        return function () {
          let _nowTime = + new Date()
            if (_nowTime - _lastTime > gapTime || !_lastTime) {
                fn()
                _lastTime = _nowTime
            }
        }
    }
     module.exports = {
      throttle: throttle
    }
    

    /pages/Phone/Phone .js:

    const util = require('../../utils/util.js')
    goOrder: util.throttle(function (e) {
        wx.navigateTo({
          url: '/pages/Phone/Phone',
        })
      }, 1000),
    

    这样就Ojbk啦,无论你怎么疯狂点击按钮也只会1s触发一次!!!

    BUT,这样的话出现一个问题,如果你在方法中打印

    console.log(this)
    console.log(e)
    console.log((new Date()).getSeconds())
    

    会发现this.data得到的this是undefined, 或者想要获取微信组件button传递给点击函数的数据e也是undefined,所以throttle函数还需要做一点处理来使其能用在微信小程序的页面js里。
    出现这种情况的原因是throttle返回的是一个新函数,已经不是最初的函数了。新函数包裹着原函数,所以组件button传递的参数是在新函数里。所以我们需要把这些参数传递给真正需要执行的函数fn

    最终解决办法
    /utils/util.js(工具类):

    unction throttle(fn,gapTime) {
        if (gapTime == null || gapTime == undefined) {
          gapTime = 1500
        }
        let _lastTime = null
        return function () {
          let _nowTime = + new Date()
            if (_nowTime - _lastTime > gapTime || !_lastTime) {
                // 将this和参数传给原函数
                fn.apply(this,arguments)
                _lastTime = _nowTime
            }
        }
    }
    

    再次点击按钮this和e都有了,完工。

    第一次写有不对的地方还请大家多多指正,可能对于前端来说是很简单的一个问题,但是对于我这种小白把搞出来了还是很有成就感的,前端大佬轻喷哈。。。

    相关文章

      网友评论

          本文标题:微信小程序连续点击按钮导致多次跳转页面

          本文链接:https://www.haomeiwen.com/subject/elwwqftx.html