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. Volley 百财帮封装

    Activity public class MainActivity extends Activity implements OnClickListener {     private Context ...

  2. jdbc02

    分层实现新闻管理系统 1.创建新闻信息实体类,jdbc配置文件以及工具类 public class News { // 新闻信息的实体类 private Integer id; //编号 privat ...

  3. CSS实现垂直居中的常用方法

    在前端开发过程中,盒子居中是常常用到的.其中 ,居中又可以分为水平居中和垂直居中.水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现.但是垂直居中相对来说是比较复杂一些的.下面 ...

  4. DIV布局之道一：DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

  5. Skin++ 皮肤库 CCheckListBox MFC 界面风格

    今天使用CCheckListBox,发现增加进去的字符串无法显示,但是当点击的时候,确有反应. 仔细检查代码,没有问题.之前也是这样用的,完全没有问题. 思前想后,觉得是因为使用了Skin++皮肤库, ...

  6. 你好，C++（27）在一个函数内部调用它自己本身 5.1.5 函数的递归调用

    5.1.5 函数的递归调用 在函数调用中,通常我们都是在一个函数中调用另外一个函数,以此来完成其中的某部分功能.例如,我们在main()主函数中调用PowerSum()函数来计算两个数的平方和,而在P ...

  7. Memcache的基本应用

    $mc = new Memcache(); $mc->connect('127.0.0.1', 11211); $sql = "select * from user where id= ...

  8. 一元多项式Polynomial的C语言实现

    /* 编译器:Dev-c++ 5.4.0 文件名:Polynomial.cpp 代码版本号:1.0 时间:2015年10月9日21:53:26 */ /* 总结: 1.结构体指针指向的区域要手动分配内 ...

  9. Javascript Array Distinct (array.reduce实现)

    javascript 没有原生的Distinct功能 . (至少现在还没有)但我们可以通过简单的script 自己实现 . Distinct就是把数组中重复出现2次或以上的值给删除掉,确保数组内每个值 ...

  10. hive 三种启动方式及用途，关注通过jdbc连接的启动

    http://blog.csdn.net/a221133/article/details/6734746