移动端H5的一些总结
页面禁止滚动(滑动穿透)
1.在移动端h5中,经常会遇到下图这种情况的弹窗,弹窗背景后面的内容不允许滚动
2.只需要在背景节点身上加上@touchmove.prevent
即可(vue中),此时处于该节点及其子节点等将无法实现页面滚动
如果弹窗内的内容不滚动,只有点击时,该方式适用; 内容滚动时是不适用的
**当弹窗内需要滚动时,就需要使用下面这种方式了
3.弹出弹窗时,禁止滚动,并停留在当前位置
const disableScroll = (ref) => {
var scrollTopVal = document.documentElement.scrollTop || document.body.scrollTop;
// 禁止滑动
const selectdom = ref || 'app';
this.$refs[selectdom].style.position = "fixed";
this.$refs[selectdom].style.top = "-" + scrollTopVal + 'px';
this.$refs[selectdom].style.width = '100%';
this.$refs[selectdom].style.overflow = "hidden";
}
4.关闭弹窗时,打开页面滚动功能,恢复在停留位置
const enableScroll = (ref) => {
/** *取消滑动限制***/
const selectdom = ref || 'app';
var scrollVal = Math.abs(parseFloat(this.$refs[selectdom].style.top));
this.$refs[selectdom].style.position = "";
this.$refs[selectdom].style.overflow = "";
this.$refs[selectdom].style.top = "";
if (document.body) {
document.body.scrollTop = scrollVal;
}
if (document.documentElement) {
document.documentElement.scrollTop = scrollVal;
}
}
IOS全面屏安全区
像iphonex、iphone12、iphone13等等,这些全面屏手机存在一个安全区,一般需要进行适配
/* 适配 iPhone XS Max / iPhone XR */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
(device-width: 414px) and (device-height: 896px),
(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3),
(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) {
#app {
padding-top: env(safe-area-inset-top); // 顶部安全区
// env(safe-area-inset-bottom) 底部安全区
}
}
超出固定宽度显示省略号(需要给固定宽度)
1.单行
width: 100px;
white-space: nowarp;
overflow: hidden;
text-overflow: ellipsis;
2.多行
width: 200px;
/* height: 100px; 如果设置了高度,且高度超过文本显示行数,在第三行会正常出现省略号,但是三行之后的仍然正常显示*/
background-color: pink;
/* 设置高度是行高的倍数,防止文本露出一半 */
line-height: 20px;
/* 旧版弹性盒 */
display: -webkit-box;
/* 弹性盒子元素垂直排列 */
-webkit-box-orient: vertical;
/* 控制要显示的行数 */
-webkit-line-clamp: 3;
overflow: hidden;
防止点击穿透
@click.stop 或者点击事件中 事件参数e.preventDefault()阻止默认事件
锚点索引
在移动端社交通讯类app中,通常会出现类似通讯录的ui功能,如下图
实现方案一:
- 索引dom身上挂上href属性,值为锚点id
- 锚点dom身上挂上id属性
预加载
在app中经常会通过特定条件触发弹窗与动画,但是当资源较大时,无法立刻加载出,会出现图片断层或者动画卡顿,用户体验度会不太好,在显示之前预先加载后,使用时可以避免这些情况
方案一
// 存放本地图片路径的数组
const imgSrcArr = [
'./images/egg.png',
'./images/put-grey.png',
'./images/activityRuleBg.png',
'./images/myPrize.png',
..., // 可以存放本地图片路径或者网络图片地址
];
// 存放生成的img对象
const imgWrap = [];
/**
* 预加载图片资源
* @param {array} arr 存放本地图片路径的数组(预加载)
*/
preloadImg(arr: string[]) {
for(let i =0; i< arr.length ;i++) {
this.imgWrap[i] = new Image();
this.imgWrap[i].src = arr[i];
}
}
preloadImg(imgSrcArr);
内热横向滚动
<div class="box">
<ul>
<li></li>
</ul>
</div>
<style lang="less">
.box {
width: 100%;
height: 80px;
overflow-x: scroll;
ul {
display: flex;
height: 80px;
width: max-content; // 设置宽度为内容的最大宽度
flex-wrap: nowrap;
overflow: hidden; // 超出的隐藏 上面父级我们写了overflow-x: scroll; 会让他滚动
}
}
</style>