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. ssanf()的用法

    转载自http://www.cnblogs.com/lyq105/archive/2009/11/28/1612677.html 看着写着不错,就转了,保存一下 C语言函数sscanf()的用法 ss ...

  2. 利用PCA来简化数据

    13.2.2 在NUmpy中实现PCA 将数据转换成前N个主成分的伪代码大致如下: 去除平均值 计算协方差矩阵 计算协方差矩阵的特征值和特征向量 将特征值从大到小排列 保留最上面的N个特征向量 将数据 ...

  3. 一个控制台贪吃蛇小游戏（wsad控制移动）

    /******************************************** * 程序名称:MR.DUAN 的贪吃蛇游戏(链表法) * 作 者:WindAutumn <flutti ...

  4. js中的apply call 操作小结(参考自网络)

    1.方法定义 call方法:  语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 说明: call ...

  5. 使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on

    [本文转载自http://sixpoint.me/942/implementing-simple-addon/] 实现一个简单的插件 教程的这个部分带你使用 SDK 来实现, 运行并打包一个插件. 这 ...

  6. 转发——推荐一些国外高质量Java开发者的博客

    学习Java很不错的一篇博客,总结了很详尽的Java开发者博客. http://www.admin10000.com/document/3373.html 这些博客具有以下特点: 文章的可读性和有独创 ...

  7. android 手机信息获取

    1. adb已安装 2. adb shell getprop 此时已列出所有相关信息

  8. HTML5数据存储

    介绍两种对象使用方法: sessionStorage方法如果关闭了浏览器,这个保存的数据就丢失. 1．sessionStorage 保存数据:sessionStorage.setItem(key,va ...

  9. mysql中的JOIN用法总结

    join是mysql中一个基础的关键词,一般在多表连接查询中使用,这里做一下总结 1.JOIN的语法格式 table_references: table_reference [, table_refe ...

  10. install pip3 for python 3.x

    前言: 我目前使用的服务器为centos6.x 系统自带的python的版本为2.6.x,但是目前无论是学习还是使用python,python3都是首选,那么问题来了.---如何安装python3环境 ...