前端开发技术难点汇总（一）

1.vue组件在main.js中引用组件不起效果时，可直接在页面引用 import引用2.在vue中使用scroller组件，上拉加载时内容虽然会会弹，但底部会留有一段空白未完全会弹，在源文件中修改，vue-scroller/src/module/render.js文件修改translate3d，将top的数值减少一些3.iOS手机将数字自动识别为电话，变成蓝色，有下划线，在head中添加...

斯诺伐克

3894人浏览 · 2019-12-01 21:18:10

斯诺伐克 · 2019-12-01 21:18:10 发布

在vue中使用scroller组件，上拉加载时内容虽然会会弹，但底部会留有一段空白未完全回弹
方案：在源文件中修改，vue-scroller/src/module/render.js文件修translate3d，将top的数值减少一些
iOS手机将数字自动识别为电话，变成蓝色，有下划线
在head中添加 <meta name="format-detection" content="telephone=no">拦截
保持弹窗的下层页面无法滑动移动端加样式
overflow-y:hidden;position:fixed;left:0;top:0;
<div bindclick.stop="getList"></div>
stop阻止事件冒泡
prevent 阻止默认行为，例如a标签的href
once 只触发一次事件处理函数
self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为，
例如3层点击，可以阻止中间一层的事件冒泡
华为mate系列 getBoundingClientRect()方法拿不到x，y值
用left,top替代
动态进度条

<!DOCTYPE html>在这里插入代码片
<html>
<head>
	<title></title>
	<style type="text/css">
		.progress{
    	width:600px;
    	height:28px;
    	border-radius: 28px;
           background: #6c6c6c;	
    }
    .progress .progress-bar{
    	    width: 300px;
    		height:28px;
    		border-radius: 28px 0 0 28px;
    		background-size:30px 30px;
    		background-image: linear-gradient(-45deg,#0face2 25%,#09b6f2 0%,#09b6f2 50%,#0face2 0,#0face2 75%,#09b6f2 0%);
    		-webkit-animation: blue-animation 10s infinite linear;
    	}
    	@-webkit-keyframes blue-animation{
              from{
              	background-position-x:0;
              }to{
              	background-position-x:600px;
              }
              
        } 
	</style>
</head>
<body>
<div class="progress">
	<div class="progress-bar"></div>
</div>
</body>
</html>

JSON.stringify(res.cardinfo) == “{}” 判断对象是否是空对象

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^