你的位置:首页 > Java教程

[Java教程]微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone)


微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone)

前言:

      这是小菜博客的第三篇文章。一直认为自己可以表达的东西太过简单,难以上台面,总是吝啬地不肯写。就算是写,也不知道从何开始。在同事的鼓励下,终于跨出了第一步。初期阶段,写文章不一定是非要给他人看,当作自己的学习笔记也是一个不错的选择。另外,在这几次的写作中发现,写技术博客本身也是需要一定的表达能力。好了,废话不多说,开始讲讲在项目中碰到的实际问题吧。

情景再现:

      正当开心地收拾东西准备下班的时候,测试部的姑娘跑过来提了一个bug: “iphone下,点击下拉框出现页面乱跳转现象,安卓机并没有这个问题。而跳转的页面刚好是底部菜单的几个页面。”由于项目比较急,小菜只能乖乖留下解决问题。再次测试之后,小菜逐一排查了可能性原因(正式版和测试版代码不一致,页面HTML代码错乱,css代码错误),但都未能解决问题。一个简单的select,怎么就出现问题了呢?百思不得其解。(至今也没有找到问题根源)

      找不出问题根源,只能先看看有没有解决方案。经过多次调试,捕获select动作,找到了一个解决方案。原理很简单:利用div来模拟select。

解决方案:

      思路也是比较清晰的。页面中有两个html结构,一是select代码照常写(一开始处于隐藏状态display:none),二是被模拟的div(一开始处于显示状态),当点击div时出现select下拉框,同时将读取的option值给被模拟的div,其模拟核心代码可下载VisualSelect.js

【html代码】

<div class=”visualSelect” >商行</div><select class=”round” style=”display:none;”>  <option value=”1”>国股</option>  <option value=”2”>商行</option>  <option value=”3”>其他</option></select>

【css代码】

.round { border-radius: 4px;}.visualSelect {  width: 100%;  padding: .45rem .5rem .25rem .75rem;  margin-bottom: .875rem;  border: 1px solid #ddd;  border-radius: 4px;  color: #bbb;}

【js代码】

注:由于该问题只存在于部分iphone,android手机并没有问题,因此最好判断机型。

var agent = navigator.userAgent;if ( agent.indexOf(“iPhone”) > -1) {  $(“select”).VisualSelect();  //调用插件即可}