目录

  1. $(“xx”).data(key,value)
  2. 元素过渡动画
  3. 使用物理按键返回时打开的日历选择器不关闭的BUG，添加页面转场监听，手动关闭
  4. ios下sui的title沉入状态栏
  5. ios的状态栏与sui的title同色
  6. 某些机器上时间选择器的按钮上下不居中
  7. 消除sui的title和content间那1px的间距
  8. checkbox或radio使用label关联的问题
  9. sui下加载大量list时页面滚动巨卡
  10. sui表单的checkbox和radio样式修改
  11. display:flex布局在一些古董android系统的一些坑
  12. 图片浏览器第一次打开关闭和再次打开数据异常且不能关闭的BUG
  13. 提升SUI列表滚动性能

$(“xx”).data(key,value)

在节点上缓存数据时，如果只缓存一次不需要再次修改，ios、android无问题，如果需要再次调用data()方法追加或修改数据且追加或修改的数据与第一次缓存的数据有重复的键，ios会报错，报错位置如下:

元素过渡动画

在对元素使用过渡动画时，尽量使用transition: transform进行，不要使用transition: left等属性，在某些低端android上会出现渲染异常(如华为p7 4.4.2)

使用物理按键返回时打开的日历选择器不关闭的BUG，添加页面转场监听，手动关闭

1
2
3
4
//监听页面转场动画开始
$(document).on("pageAnimationStart",".page",function(){
	$.closeModal(".picker-calendar");//关闭日历选择器（解决被呼出的日历选择器使用物理硬件返回时不会隐藏的问题）
});

ios下sui的title沉入状态栏

不要使用margin-top:20px或top:20px，这种情况在页面进行转场时title可能会再次沉入状态栏

方式一：这种方式会使某些底部元素被遮挡

1
2
3
if($.device.os=="iphone"||$.device.os=="ios"){
	$(".page").css({top:"20px",position:"fixed"});
}

为了避免sui的title沉入通知栏，手动将页面下沉20px,解决方式是将list父容器padding下，其它方式也可以

1
2
/*ios列表最后一项显示不全*/
.list-container{padding-bottom: 1rem !important;background: inherit !important;}

方式二：在.page-group元素上添加ios-page-fix类，这种方式不会造成ios下list列表最后一项显示不全(某些低ios版本没测试)

1
2
3
4
5
6
.ios-page-fix{
    position: fixed !important;
    top: 20px !important;
    bottom: 0 !important;
    height: auto !important;
}

ios的状态栏与sui的title同色

在.bar上添加个user-bar类，防止日期选择器等弹出窗体的title被修改

1
2
3
4
html,
body,
.page-group,
.user-bar.bar{background-color: #007be4;}

某些机器上时间选择器的按钮上下不居中

1
2
3
4
5
6
7
8
/*修正日期选择器按钮上下不居中*/
.picker-calendar-month-picker a.icon-only, 
.picker-calendar-year-picker a.icon-only {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items:center;align-items: center;
	-webkit-justify-content: center;justify-content: center;
}

消除sui的title和content间那1px的间距

1
.bar:after{height:0rem;}

checkbox或radio使用label关联的问题

对一个checkbox或radio使用label进行关联时，尽量用一个label关联一个checkbox或radio(隐式显示都可以)曾尝试对一个checkbox进行两个显示关联，在4s上出现bug，期望的效果不出现，android和iphone 6无问题

sui下加载大量list时页面滚动巨卡

注释掉sm.css中.list-block .item-link.list-button:after下内容

sui表单的checkbox和radio样式修改

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
/*重写表单radio、checkbox样式*/
form input[type="radio"],
form input[type="checkbox"]{display: none;}
form i.icon-form-checkbox{
  width: 1.1rem;
  height: 1.1rem;
  position: relative;
  border-radius: 1.1rem;
  border: 1px solid #c7c7cc; 
  box-sizing: border-box;
}
form i.icon-form-checkbox:after {
  content:' ';
  position: absolute;
  left: 50%;
  margin-left: -0.3rem;
  top: 50%;
  margin-top: -0.2rem;
  width: 0.6rem;
  height: 0.45rem;  
}
form input[type="radio"]:checked + i.icon-form-checkbox,
form input[type="checkbox"]:checked + i.icon-form-checkbox{
  border:none;
  background-color: #0894ec;
}
form input[type="radio"]:checked + i.icon-form-checkbox:after,
form input[type="checkbox"]:checked + i.icon-form-checkbox:after {
	background: no-repeat center;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23ffffff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E");
	background-size: 0.6rem 0.45rem;
}

display:flex布局在一些古董android系统的一些坑

除了加上-webkit-这种私有前缀外，display:flex还有一种古董级写法display: -webkit-box;这种写法已经从W3C标准中剔除，必须加上-webkit-前缀，如果需要兼容android4.0-4.2系统，除了写flex属性外，还要写-webkit-box，其对应属性也一样

图片浏览器第一次打开关闭和再次打开数据异常且不能关闭的BUG

修改sm-extend.js为如下代码（将transitionEnd改为animationEnd）

提升SUI列表滚动性能

注释掉sm.css以下内容