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. python 整型--《Python 3程序开发指南》笔记

    参考:<Python 3程序开发指南> 整数转换函数: bin(i) 返回整数i的二进制表示(字符串) hex(i) 返回i的十六进制表示(字符串) int(x) 将x转换为整数,失败产生 ...

  2. 小学生之Java中迭代器实现的原理

    一. 引言 迭代这个名词对于熟悉Java的人来说绝对不陌生.我们常常使用JDK提供的迭代接口进行java collection的遍历: Iterator it = list.iterator();wh ...

  3. FFMPEG 视频旋转设置

    fmpeg -i inputfile.mp4 -vf "transpose=1" outputfile.mp4 0=90CounterCLockwise and Vertical ...

  4. hdu 1829 基础并查集，查同性恋

    A Bug's Life Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  5. 你好，C++（29）脚踏两只船的函数不是好函数 5.4 函数设计的基本规则

    5.4  函数设计的基本规则 函数是C++程序的基本功能单元,就像一块块砖头可以有规则地垒成一座房子,而一个个函数也可以有规则地组织成一个程序.我们在大量使用他人设计好的函数的同时,也在设计大量的函数 ...

  6. mysql时间int日期转换

    select from_unixtime(1350437720);select unix_timestamp(now());插入用 unix_timestamp(date)查询用from_unixti ...

  7. Vxworks、QNX、Xenomai、Intime、Sylixos、Ucos等实时操作系统的性能特点

    Vxworks.QNX.Xenomai.Intime.Sylixos.Ucos等实时操作系统的性能特点 VxWorks操作系统 VxWorks 操作系统是美国WindRiver公司于1983年设计开发 ...

  8. [POJ] 2226 Muddy Fields(二分图最小点覆盖)

    题目地址:http://poj.org/problem?id=2226 二分图的题目关键在于建图.因为“*”的地方只有两种木板覆盖方式:水平或竖直,所以运用这种方式进行二分.首先按行排列,算出每个&q ...

  9. SwitchySharp怎样设置 （ proxy switch！的设置与使用方法）

    规则列表URL  https://autoproxy-G{过}F{滤}Wlist.googlecode.com/svn/trunk/G{过}F{滤}Wlist.txt 注:不同的代{过}{滤}理  相 ...

  10. 关于DDOS攻击中TCP半连接数与FD的关系

    TCP最大连接数 在tcp应用中,server事先在某个固定端口监听,client主动发起连接,经过三路握手后建立tcp连接.那么对单机,其最大并发tcp连接数是多少? 理论最大值 在确定最大连接数之 ...