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

时间：2021-11-12 13:53:52

Bug描述：

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

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

滑动前：

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

滑动后：

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

期望达到的效果：

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

解决方案：

判断是否是微信环境:

  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库出现&OpenCurlyDoubleQuote;无法解析的外部符号 &lowbar;&lowbar;snprintf ”问题的解决

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

  3. 修改页面中显示出需要修改的数据&lpar;包括select选择框复显示&rpar;

    页面中需要用到某个对象时,在底层代码中赋值,然后页面用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. easyui combotree 默认 初始化时就选中

    做得权限管理系统,用combotree来控制权限,combotree是通过后台json来初始化,但是前台不是选中状态. 下面是核心代码已经标红. $('#txtTree').combotree({ m ...

  2. Copy15G的初始容量，注册就再送5G，邀请注册的人也送5G

    Copy15G的初始容量,注册就再送5G,邀请注册的人也送5G,可谓是史上最隆重最给力的容量赠送活动~~~https://copy.com?r=kFpfsZ

  3. Jfreechart 乱码

    整个图标分成三部分chart   title,chart 的plot还有chart的   legend三个部分需要对他们分别设置字体就对了. 先看解决方法( 把这几个全部设置了,都搞定了就可以了): ...

  4. mac 配置Python集成开发环境（Eclipse &plus;Python&plus;Pydev&rpar;

    1.下载Mac版64位的Eclipse. 进入到Eclipse官方网站的下载页面(http://www.eclipse.org/downloads/),我选择了下图所示的软件包, 浏览器在下载过程中使 ...

  5. JMS基础&lpar;2&rpar;

    1.  JMS基本概念 JMS(Java Message Service) ,即Java消息服务.JMS是SUN提出的旨在统一各种消息中间件(MOM)系统接口的规范.它提供标准的产生.发送.接收消息的 ...

  6. 使用fdisk进行磁盘管理

    http://itercast.com/lecture/17 disk是来自IBM的老牌分区软件,几乎所有Linux系统均默认安装 fdisk是一个MBR分区工具,不可用于GPT分区 只有超级用户(r ...

  7. 2 MySQL安装

    目录: 1. mysql安装简介2. 下载AppServ3. 安装AppServ4. 使用phpmyadmin连接MySQL5. 使用MySQL Command Line Client 连接MySQL ...

  8. 你所不知道的mybatis居然也有拦截器

    对于mybatis的拦截器这个想法我来自于三个地方 也就是下面这个三个地方是可以使用的,其他的情况需要开发人员根据实际情况来使用. 1.对于分页的查询,我们可以对于分页的方法采用比较规范的命名,然后根 ...

  9. UWP 使用Telerik Chart控件

    Telerik开发的chart功能异常强大 用户可以自行在商店搜索"UI for uwp demos". 下面我就结合以下我的软件,来说明一下饼状图的实现. 看看效果: 先看一下X ...

  10. 环境与工具2：建立高效的mac环境

    你的工作与生活离不开电脑,电脑是一个工具,也是一个环境.环境是不是绿水青山,是不是得心应手,这是很重要的事情.小程平时使用macbook来学习跟娱乐,最近重装了系统,很多环境与工具都需要重新组建. 那 ...

相关文章