Bug描述：

使用低版本安卓(<5.2),在微信上打开网页,点击下拉框，会出现如下图所示的用来展示select选项的弹出框；

在选项较少的时候，可以向下滑动，将选项滑到底部

滑动前：

滑动后：

期望达到的效果：

解决方案：

判断是否是微信环境:

  function isWeixinBrowser(){

    return /micromessenger/.test(navigator.userAgent.toLowerCase());

  }

判断安卓版号:

   var userAgent = navigator.userAgent;

   console.info(userAgent);

   var index = userAgent.indexOf("Android");

   if(index >= 0){

     var androidVersion = parseFloat(userAgent.slice(index+8));

     // 安卓版本小于5.2

     if(androidVersion < 5.2){

      //event

     }

   }

引入FancySelect来解决select弹出窗效果:

github地址: https://github.com/paulstraw/FancySelect

具体代码DEMO：

<!doctype html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<title>Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决</title>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript" src="http://code.octopuscreative.com/fancyselect/fancySelect.js"></script>

<style type="text/css">

*{margin: 0;padding:0;box-sizing: border-box;}

.container{

  width: 86%;

  margin-top: 7%;

  margin-left: 7%;

}

div.fancy-select {

  position: relative;

  font-size: 16px;

}

div.fancy-select.disabled {

  opacity: 0.5;

}

div.fancy-select div.trigger {

  border-radius: 4px;

  cursor: pointer;

  padding: 10px 24px 9px 9px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  position: relative;

  background: #99A5BE;

  border: 1px solid #99A5BE;

  border-top-color: #A5B2CB;

  color: #fff;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

  width: 100%;

  transition: all 240ms ease-out;

  -webkit-transition: all 240ms ease-out;

  -moz-transition: all 240ms ease-out;

  -ms-transition: all 240ms ease-out;

  -o-transition: all 240ms ease-out;

}

div.fancy-select div.trigger:after {

  content: "";

  display: block;

  position: absolute;

  width: 0;

  height: 0;

  border: 5px solid transparent;

  border-top-color: #4B5468;

  top: 20px;

  right: 9px;

}

div.fancy-select div.trigger.open {

  background: #4A5368;

  border: 1px solid #475062;

  color: #7A8498;

  box-shadow: none;

}

div.fancy-select div.trigger.open:after {

  border-top-color: #7A8498;

}

div.fancy-select ul.options {

  position: absolute;

  top: 40px;

  left: 0;

  visibility: hidden;

  opacity: 0;

  z-index: 9999;

  width:98%;

  max-height: 240px;

  overflow: auto;

   -webkit-overflow-scrolling: touch;

  background: #fff;

  border-radius: 8px;

  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}

div.fancy-select ul.options.open {

  visibility: visible;

  width: 86%;

  position: fixed;

  top:0;

  bottom:0;

  left:7%;

  margin: auto;

  opacity: 1;

}

.fancy-select ul.options li:last-child:after{

  display: none;

}

.icon-close {

  position: fixed;

  top:-93px;

  right:10%;

}

div.fancy-select ul.options.overflowing {

  top: auto;

  bottom: 40px;

}

div.fancy-select ul.options.overflowing.open {

  top: auto;

  bottom: 50px;

}

div.fancy-select ul.options li {

  position: relative;

  padding: 15px;

  color: #666;

  cursor: pointer;

  white-space: nowrap;

  text-align: center;

  list-style: none;

}

div.fancy-select ul.options li:after{

  content:'';

  display: block;

  width: 100%;

  height: 1px;

  position: absolute;

  bottom:0;

  left:0;

  border-bottom: 1px solid #e7e7e7;

  -webkit-transform-origin: 100% 0;

  transform-origin: 100% 0;

  -webkit-transform: scaleY(.5);

  transform: scaleY(.5);

}

div.fancy-select ul.options li.hover{

  background-color: #2eacff;

  color: #fff;

}

div.fancy-select ul.options li.hover:after{

  display: none;

}

.selectMask{

  display: none;

  width: 100%;

  height: 100%;

  position: fixed;

  top:0;

  left:0;

  z-index: 900;

  background-color: rgba(0,0,0,.2);

}

</style>

</head>

<body>

<div class="container">

     <section>

        <select>

          <option >朋友</option>

          <option >公立</option>

          <option >七里香1</option>

          <option >朋友2</option>

          <option >公立3</option>

          <option >七里香4</option>

          <option >朋友5</option>

          <option >公立6</option>

        </select>

     </section>

</div>

<div class="selectMask"></div>

<script type="text/javascript">

  //判断是否微信

  function isWeixinBrowser(){

    return /micromessenger/.test(navigator.userAgent.toLowerCase());

  }

  //判断是否存在select

  function isSelect(){

    return $('body').find('select').length > 0;

  }  

  //判断安卓版本

   var userAgent = navigator.userAgent;

   console.info(userAgent);

   var index = userAgent.indexOf("Android");

   if(index >= 0){

     var androidVersion = parseFloat(userAgent.slice(index+8));

     // 安卓版本小于5.2,微信环境，以及存在select

     if(androidVersion < 5.2 && isWeixinBrowser() && isSelect() ){

        //fancySelect方法调用:github地址(https://github.com/paulstraw/FancySelect)

        $('select').fancySelect();

        //显示隐藏mask

        $('.trigger').bind('click',function(){

           $('.selectMask').show();

        });

        $('.options,.selectMask').click(function() {

          $('.selectMask').hide();

        });

        $('.basic').change(function() {

           $('.selectMask').hide();

        });

     }

   }

</script>

</body>

</html>

　　

Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决的更多相关文章

  1. Android 之低版本高版本实现沉浸式状态栏

    沉浸式状态栏确切的说应该叫做透明状态栏.一般情况下,状态栏的底色都为黑色,而沉浸式状态栏则是把状态栏设置为透明或者半透明. 沉浸式状态栏是从android Kitkat(Android 4.4)开始出 ...

  2. VS2015调用低版本lib库出现“无法解析的外部符号 __snprintf ”问题的解决

    VS2015在调用低版本lib库出现有时会出现“无法解析的外部符号 __snprintf ”的问题,解决方法是加入lib库“legacy_stdio_definitions.lib”到工程.

  3. 修改页面中显示出需要修改的数据(包括select选择框复显示)

    页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...

  4. android popupwindow低版本报空指针

    在项目中使用Popupwindow pop=new Popupwindow();在2.3版本报 异常信息: Exception: null 堆栈信息: android.widget.PopupWind ...

  5. nginx低版本不支持pathinfo模式，thinkphp针对此问题的解决办法

    将一个thinkphp项目从apache环境移到nginx1.2上,怎奈,nginx这个版本默认不支持pathinfo模式 首先,编辑nginx的虚拟主机配置文件 location ~ .*.(php ...

  6. android dialog 模拟新浪、腾讯title弹框效果

    http://blog.csdn.net/jj120522/article/details/7764183 首先我们看一下新浪微博的效果(其它就是一个dialog):                点 ...

  7. select选择框中，model传的值并非是页面上的值，而是另一个值

    对于编程来说,money和rebate代表的是金额优惠和折扣优惠,采用money或rebate便于数据存储.但是页面显示给用户的时候是金额优惠和折扣优惠,并不是显示编程中所存储数据.所以选择的mode ...

  8. jQuery默认select选择第一个元素

    $("#id option:first").prop("selected", 'selected');

  9. 使用Gradle构建Android应用内测版本

    在开发应用的过程中,有时候需要比较当前线上版本和正在开发中的版本差异,目前的做法只能是在两个不同的设备上面安装线上版本和开发中的版本,因为当前版本在调试过程中会覆盖旧版本.本文通过使用gradle来构 ...

随机推荐

  1. MVC项目，系统找不到指定的文件。（异常来自 HRESULT:0x80070002）

    今天在用Visual Studio新建MVC项目的时候,遇到错误 系统找不到指定的文件.(异常来自 HRESULT:0x80070002) 解决办法:工具--> 扩展和更新 -->联机(V ...

  2. java transient关键字和transaction的区别

    transient:表示临时的,不会被持久化,保存进数据库 transaction:表示事务 <div style="background: #fff; color: #0ff;&qu ...

  3. （转）C#静态构造函数

    静态构造函数是C#的一个新特性,在编程过程中用处并不广,它的主要目的是用于初始化一些静态的变量. 因为这个构造函数是属于类的,而不属于任何一个实例,所以这个构造函数只会被执行一次,而且是在创建此类的第 ...

  4. WebStorm修改默认快捷键

    打开 "File" -> "Setting" -> "keymap",即可修改.

  5. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 武汉科技大学ACM：1003: 看美女

    Problem Description “排排站,赏美女……” YJ师兄在今年牡丹江赛区人品爆发,怒摘银奖,心情倍好,现组织大家去黄家湖边站成一排看美女 ^.^ N个人站成一排.不巧,美女们只在队伍的 ...

  7. 删除所有ecshop版权和logo

    前面我们已经讲过如何删除ecshop的版权,但是还有很多人不会,今天就详细的讲下如何删除所有ecshop版权和logo 前台部分: 1:去掉头部TITLE部分的ECSHOP演示站 Powered by ...

  8. html表格table设置边框

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  9. wamp目录索引图片不显示

    在wampserver安装目录下  \bin\apache\Apache2.2.21\conf\extra\httpd-autoindex.conf Alias /icons/ "c:/Ap ...

  10. WordPress插件制作笔记（一）---First Plugins Demo

    1->add_action  HOOK简单说明: http://codex.wordpress.org/Plugin_API/Action_Reference (参考网址) //在后台页脚位置加 ...