最近做微信公众号开发的时候遇到一个问题,上线后发现此问题后检查代码没有发现问题,无奈只能回滚到上一个版本。
问题是这样的:页面一个选择的浮层,在浮层点击确定后,下面的页面会自动提交
在测试环境上无法重现,也不可能用正式环境测试问题,百撕不得骑姐之际,突然想到这个现象十分像JS冒泡,当然不是JS冒泡,那会不会是点了这个确定触发了下面的提交,测试环境没问题是因为测试环境由于数据原因,提交按钮刚好没在确定下面。
这个容易,造数据验证,果然猜对了。剩下的就好办了,在浮层还在的时候锁掉下面的提交就好了。
这个浮层是由mobiscroll.scroller控件产生的,去翻文档,发现特别慢,懒得翻墙就看了下控件的源码。
找到了浮层打开前的事件:onBeforeShow;又找到了选择事件,同时因为需要显示的值和控件原本的不同,就直接改代码了:
/** * Set button handler. */ that.select = function () { if (that.hide(false, 'set') !== false) { setValue(true, true, 0, true); var showText = that.getValue(); if(showText.length>12){ var text = showText.slice(0,11); showText = text + "..."; } /*event('onSelect', [that.val]);改为显示值*/ event('onSelect', [showText]); /*加个事件*/ event('onEndSelect', [showText]); } }; /** * Cancel and hide the scroller instance. */ that.cancel = function () { if (that.hide(false, 'cancel') !== false) { event('onCancel', [that.val]); event('onEndSelect', [that.val]); } };
掉用处的代码:
var opt = { 'select-opt': { preset: 'select', group: true, width: 50 ,onBeforeShow:function(){ lockSure = true; } ,onClose:function(){ setTimeout('lockSure = false;',400); } ,onEndSelect:function(){ setTimeout('lockSure = false;',330); } } };
上面onClose是同事连VPN后在文档中找到的事件,不过发现直接在事件中设置锁定变量值是不行的,只好延迟一下执行。经过测试,在手机反应比较慢时onClose在400毫秒时或选择结束时延迟330毫秒基本可以保证执行正常,选择结束效果产生会快一点,onClose的效果会比我加的事件处理全面一些,所以两个都保留了。