移动端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>

移动端H5