H5 keng

一、url转码，url传值得时候中文会被转义，通过 decodeURIComponent（）进行转码

this.url = decodeURIComponent(item.split('=')[1])
编码的话用encodeURI( )

son.name = encodeURI(infoJson.name)
二、H5页面在ios中滑动不流畅问题，可以通过css进行解决，兼容safari浏览器。

//这三句缺一不可
height: 100%;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
还有一种办法就是在body上设置 overflow-x:hidden; 在需要滚动的元素上设置 overflow-y: auto 这个也可以解决

三、vue中v-html css样式不生效问题

去掉 style标签中的scope

四、vantUI中的下拉刷新与页面滚动冲突问题

我的解决办法是给标签加上禁用属性，然后页面中写上监听scroll的方法，滚动距离为0的时候去开启下拉刷新，大于0的时候则禁用下拉刷新功能，这样就完美解决了下拉刷新与页面滚动冲突的问题

有的时候会监听不到页面滚动距离，window.addEventListener('scroll', this.handleScroll,true)第三个true属性是关键，可以alert出scrollTop值看看，再根据需求去判断

mounted() {
window.addEventListener('scroll', this.handleScroll,true)
},
methods: {
//var scrollTop = 0;
// if(document.documentElement && document.documentElement.scrollTop) {
// scrollTop = document.documentElement.scrollTop;
// } else if(document.body) {
// scrollTop = document.body.scrollTop;
// }
//监听页面滚动事件，来控制下拉刷新的禁用与开启
handleScroll () {
const scrollHeight = document.getElementById('box__')
//获取滚动距离，scrollTop属性
let scrollTop = scrollHeight.scrollTop
if(scrollTop == 0){
this.refreshShow = false;
}else{
this.refreshShow = true;
}
},
}
五、vue中使用canvas对网页进行裁剪

先引入html2canvas

npm install html2canvas --save
useCORS: true 这句话很重要，允许服务器跨域，裁剪的图片资源是不允许跨域的，服务端要处理跨域

再图片上加入跨域属性 crossorigin="Anonymous"

<template>
<img :src="head" alt="" crossorigin="Anonymous" class="head_">
</template>

import html2canvas from 'html2canvas'; //引入

canvasImg() {
let ref = this.$refs.faultTree // 截图区域
html2canvas(ref, {
backgroundColor: '#fff',
useCORS: true //****允许跨域****
}).then((canvas) => {
let img = canvas.toDataURL('image/png') //为base64格式的图片，自行按需转换
})
},
六、vue不识别textarea的 ↵ 换行符号