h5开发记录

发表于 | 阅读次数:

清除样式

1
2
3
4
5
6
a {
	text-decoration: none;
	color: inherit;	
	-webkit-tap-highlight-color: transparent; /* 清除默认点击链接时出现的高亮效果 */
	-webkit-touch-callout: none; /* - iOS - 禁用系统默认菜单 */
}

判断当前页面所在的环境是不是微信内置浏览器

1
2
3
4
5
6
7
8
function isWeiXin() {
    var ua = window.navigator.userAgent.toLowerCase();// 不加window部分Android机会显示不了提示图，即判断不了是否是微信
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

H5中Echarts 使用

H5页面flex布局兼容华为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
  display:-webkit-flex;
  display:flex;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
}

.flex1 {
  -webkit-flex: 1;
  -ms-flex: 1
  flex: 1;
  -webkit-box-flex: 1
  -moz-box-flex: 1;
}

点击类目时字号变大字体加粗 导致的文字跳动问题

解决：使用伪元素
content: attr(attribute); 将元素的 attribute 属性以字符串形式返回。
content 语法与属性值

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
<div class="category sticky">
  <a class="active" href="javascript:;" data-name="最受关注">最受关注</a>
  <a href="javascript:;" data-name="面部精华">面部精华</a>
  <a href="javascript:;" data-name="笔记本电脑">笔记本电脑</a>
  <a href="javascript:;" data-name="手机">手机</a>
  <a href="javascript:;" data-name="显示器">显示器</a>
</div>
<style>
.category {
  display: flex;
  justify-content: space-around;
  height: 44px;
  background: #fff;
  font-size: 14px;
  line-height: 44px;
  color: #666;
}
.category .active {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}
.category a::before {
  display: block;
  content: attr(data-name);
  font-size: 16px;
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
</style>

在新页面中返回到前一页浏览的历史位置

在本地记录字段，记录页面滑动的高度和当前的分类ID