mobileSite开发Tips

CrazyCodes 发布于2019-08-21 10:32 / 2176人阅读

1，根节点(html,body)overflow属性会遮盖fixed定位元素
2，fixed元素点击时会弹出底部的菜单，应该是浏览器特性(safari)
3，fixed元素使用后，在body里面使用padding-bottom以占位，如果放入其他元素中，最好也占位，避免IOS滑动特性遮盖元素
4，inline-block可以使用float让元素保持在一条线上，无需使用vertical-align进行对齐
5，touch事件里阻止默认可以减少卡顿，但是touchStart里面如果阻止，页面的滑动会受影响。
6，需要交替显示的元素，最好都隐藏，根据需要显示，可以避免页面跳动
7，页面返回统一调用histroy.back()方法就好，特殊处理进行URL判断
8，从哪里来到哪里去，在link里加入returnUrl来进行回跳
9，对于浮动的banner关闭时间，浏览记录可以通过localStorage进行存储
10，如果浏览器开启无痕模式，webStroage的setItem方法会报错，需要try Catch提醒用户
11，使用.clearfix:after {content: "";display: table;clear: both;}进行图片和文字的横向排列
12，文字多行省略{overflow: hidden; text-overflow: ellipsis;display: -webkit-box;  -webkit-line-clamp: 2;-webkit-box-orient: vertical;-webkit-box-pack: center;}
13，能使用background-image当背景的就不使用img标签，减少内存占用。
14，如果需要在click事件中在绑定click事件，最好先解绑。或者换一种思路，使用trigger进行触发click事件
15，需要计算内部宽度，可以用padding进行宽度的设置，用于布局
16，对于图片，如果想完整放入div，需要设置display:block，否则会出现白边，因为图片默认是inline属性
17，由于浏览器对border渲染不一致(或滑动时候会改变宽度)，渲染粗细不均匀，可以使用div进行模拟border，也可以使用border-image代替
18，对于图片显示模糊，可以使用padding进行缩小，但不能从根本上解决问题
19，input去掉原本样式用图片代替时候，需要注意IOS里面会有黑色的背景，否则可能有黑边，设置background-color:white即可
20，关于跳转，支付宝WAP跳转，replace替代href跳转
21，定时器一定要记得清理，重复时会内存不释放就会卡顿
____________________________________
保持更新...

GPU云服务器云服务器 mobileSite tips tips1 小tips层 js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85703.html

[无心插柳]简单实现常用的表单校验函数

摘要：但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。提供了常用的校验规则，需要的可以扩展。有意取而不得，失落而归。无意间有所获，未有喜悦，但珍惜依旧 1.前言表单校验，相信绝大部分的开发者会遇到过，网上也有很多插件可使用。但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。有点轮子的雏形...

BingqiChen 2019-08-23 13:03 评论0 收藏0
[无心插柳]简单实现常用的表单校验函数

摘要：但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。提供了常用的校验规则，需要的可以扩展。有意取而不得，失落而归。无意间有所获，未有喜悦，但珍惜依旧 1.前言表单校验，相信绝大部分的开发者会遇到过，网上也有很多插件可使用。但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。有点轮子的雏形...

Jeff 2019-08-02 11:59 评论0 收藏0
[无心插柳]简单实现常用的表单校验函数

摘要：但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。提供了常用的校验规则，需要的可以扩展。有意取而不得，失落而归。无意间有所获，未有喜悦，但珍惜依旧 1.前言表单校验，相信绝大部分的开发者会遇到过，网上也有很多插件可使用。但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。有点轮子的雏形...

JinB 2019-08-29 17:15 评论0 收藏0
11种方法实现一个tips带有描边的小箭头（更新中...）

摘要：查看效果第六种和背景描边旋转此方法就是设置一个宽度和高度分别为的方块背景，然后背景相邻的两条边描边再有的属性旋转角度，来实现箭头的朝向。 showImg(https://segmentfault.com/img/bVbmX2F?w=400&h=277); 我们在网页开发中实现一个tips时会有一个小箭头，实现这种方法的文章网上已经泛滥了，但有时实现这个小箭头不止只有单纯的三角它还有描边...

oneasp 2019-08-30 15:55 评论0 收藏0