js判断手指滑动方向（移动端）
var startx, starty
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI
}
//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx
var angy = endy - starty
var result = 0
//如果滑动距离太短
if (Math.abs(angx) <2 &&Math.abs(angy) <2) {
return result
}
var angle = getAngle(angx, angy)
if (angle >= -135 &&angle <= -45) {
result = 1
} else if (angle >45 &&angle <135) {
result = 2
} else if ((angle >= 135 &&angle <= 180) || (angle >= -180 &&angle <-135)) {
result = 3
} else if (angle >= -45 &&angle <= 45) {
result = 4
}
return result
}
//手指接触屏幕
document.addEventListener("touchstart", function(e) {
startx = e.touches[0].pageX
starty = e.touches[0].pageY
}, false)
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy
endx = e.changedTouches[0].pageX
endy = e.changedTouches[0].pageY
var direction = getDirection(startx, starty, endx, endy)
switch (direction) {
case 0:
alert("未滑动！")
break
case 1:
alert("向上！")
break
case 2:
alert("向下！")
break
case 3:
alert("向左！")
break
case 4:
alert("向右！")
break
default:
}
}, false)
为什么要写这篇文章?安装lib-flexible
引入lib-flexible
安装px2rem-loader
配置px2rem-loader
项目里使用设计稿标注的px，编译或者打包后会自动转化为rem
在Vue-cli中使用lang="less"时报错： Module build failed: TypeError: this.getOptions is not a function at Object.loader
出现这个问题的原因是less-loader版本过高，降级到5.0.0即可
main.js添加
main.js
router/index.js
src文件夹下新建http文件夹，并在文件夹内新建request.js
request.js
main.js
使用方法:
然后就可以在项目中以 this.$axios 来进行请求
static文件夹下新增config.js
使用
(1) router/index.js
给每个路由新增一个auth字段来判断是否需要登录
(2) main.js
移动端项目调式怎么可以少了这个神器.
static 文件夹下新建 vconsole.js ，
再去git上拷贝源码下来,在 index.html 里引入, vconsole 地址： 点这里
index.html
main.js
App.vue
谷歌下不支持小于12px，当字体小于12px时 会变成12px 这个时候我们设置的rem及=就没有效果了 设置text-size-adjust会解决这个问题 禁用Webkit内核浏览器的文字大小调整功能
src / components 下新建index.js
main.js
使用: 直接使用不需要import
main.js中路由的前置守卫里添加这句：
本模板框架gitee地址： https://gitee.com/apple0515/vue_h5_project
持续更新~~
目的 : 监听移动端键盘展开事件
工具 : 移动端, js
思路 : 可以通过监听窗口大小的改变来实现,当端键盘展开时,窗口的大小发生改变,依据此基础进行判断.
js 移动端关于页面布局，如果底部有position:fixed的盒子，又有input，当软键盘弹出收起都会影响页面布局。这时候Android可以监听resize事件，代码如下，而iOS没有相关事件。
方法一实现代码:
//获取当前页面高度var winHeight = $(window).height()
$(window).resize(function(){
var thisHeight=$(this).height()
if(winHeight - thisHeight >50){
//窗口发生改变(大),故此时键盘弹出
//当软键盘弹出，在这里面操作
}else{
//窗口发生改变(小),故此时键盘收起
//当软键盘收起，在此处操作
}
})
方法二:监控键盘
监控的方式其实筛选下来也不过两种：
① 时钟setInterval不停监控
② 系统级别的监控，比如键盘出现时候通知window一个事件，但是很遗憾现在还没有这个事件，但是这个事件等于
input类元素获取焦点 == 弹出虚拟键盘
input类元素失去焦点 == 收起虚拟键盘
但是我们前面已经说过，上面的原则不一定可靠，所以该种方案也未必可靠了
基于系统监控这点，我们还可以监控resize事件或者scroll事件，但是经过我的测试，setInterval表现比较好.于是，我们简单写一段代码，可靠是否满足需求：
window.alert = function (msg) {$('body').append('<div>' + msg + '</div>')
}
function fixedWatch(el) {
if(document.activeElement.nodeName == 'INPUT'){
el.css('position', 'static')
} else {
el.css('position', 'fixed')
}
}
setInterval(function () {
fixedWatch($('#headerview header'))
}, 500)
如上:移动端键盘展开事件即可被监听.
