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

Bug描述：

 

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

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

 

滑动前：

 

滑动后：

 

 

期望达到的效果：

 

 

 

解决方案：

 

判断是否是微信环境:

?
1
2
3
function isWeixinBrowser(){
  return /micromessenger/.test(navigator.userAgent.toLowerCase());
}

 

判断安卓版号:

?
1
2
3
4
5
6
7
8
9
10
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：

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!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>

　　

posted @   Me-Kevin  阅读(838)  评论(0)  编辑  收藏  举报
编辑推荐：
· 对象命名为何需要避免'-er'和'-or'后缀
· SQL Server如何跟踪自动统计信息更新?
· AI与.NET技术实操系列：使用Catalyst进行自然语言处理
· 分享一个我遇到过的“量子力学”级别的BUG。
· Linux系列：如何调试 malloc 的底层源码
阅读排行：
· C# 中比较实用的关键字，基础高频面试题！
· .NET 10 Preview 2 增强了 Blazor 和.NET MAUI
· Ollama系列05：Ollama API 使用指南
· 为什么AI教师难以实现
· 如何让低于1B参数的小型语言模型实现 100% 的准确率
点击右上角即可分享
微信分享提示