源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办

  • 时间:2020-02-09 17:31 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
[b]相关阅读:[url=http://www.1sucai.cn/article/72718.htm]微信支付如何实现内置浏览器的H5页面支付[/url][/b] [b]情景再现:[/b]       正当开心地收拾东西准备下班的时候,测试部的姑娘跑过来提了一个bug: “在iphone下,点击下拉框出现页面乱跳转现象,安卓机并没有这个问题。而跳转的页面刚好是底部菜单的几个页面。”由于项目比较急,小编只能乖乖留下解决问题。再次测试之后,小编逐一排查了可能性原因(正式版和测试版代码不一致,页面HTML代码错乱,css代码错误),但都未能解决问题。一个简单的select,怎么就出现问题了呢?百思不得其解。(至今也没有找到问题根源)       找不出问题根源,只能先看看有没有解决方案。经过多次调试,捕获select动作,找到了一个解决方案。原理很简单:利用div来模拟select。 [b]解决方案: [/b]       思路也是比较清晰的。页面中有两个html结构,一是select代码照常写(一开始处于隐藏状态display:none),二是被模拟的div(一开始处于显示状态),当点击div时出现select下拉框,同时将读取的option值给被模拟的div,其模拟核心代码可下载VisualSelect.js [b]html代码 [/b]
<div class=”visualSelect” >商行</div>
<select class=”round” style=”display:none;”>
 <option value=”1”>国股</option>
 <option value=”2”>商行</option>
 <option value=”3”>其他</option>
</select> 
[b]css代码 [/b]
.round { border-radius: 4px;}
.visualSelect {
 width: 100%;
 padding: .45rem .5rem .25rem .75rem;
 margin-bottom: .875rem;
 border: 1px solid #ddd;
 border-radius: 4px;
 color: #bbb;
} 
[b]js代码 [/b] 注:由于该问题只存在于部分iphone,android手机并没有问题,因此最好判断机型。
var agent = navigator.userAgent;
if ( agent.indexOf(“iPhone”) > -1) {
 $(“select”).VisualSelect(); //调用插件即可
}
PS:bootstrap滚动监听在iPhone微信内置的浏览器上有时有效果有时没有 bootstrap写了一个affix的附加导航(导航条在左边,数据在右边,分成的两列),在安卓手机的微信内置浏览器上滚动监听是正常的,但是在iPhone微信的内置浏览器上有时可以监听有时不能监听,这是什么原因? [b]解决方案:[/b] 出现这个原因是用HTML5写的网页,iPhone没有及时响应导致的,最好用jQuery mobile。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部