H5开发踩坑记录（总有你用的到的，持续更新）

最新推荐文章于 2024-08-23 18:58:12 发布

原创最新推荐文章于 2024-08-23 18:58:12 发布 · 置顶 · 475 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #前端

Vue 同时被 3 个专栏收录

44 篇文章

订阅专栏

原生JavaScript

13 篇文章

订阅专栏

ES6

4 篇文章

订阅专栏

本文汇总了前端开发中常见的问题及解决方案，包括URL转码、H5页面在iOS中的滑动优化、Vue中v-html样式生效、vantUI下拉刷新与滚动冲突、使用canvas进行网页裁剪、识别textarea换行符及移除input type为number的箭头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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的 ↵ 换行符号

<p v-html="textarea"></p>
//改成pre标签就可以识别换行符了
<pre v-html="textarea"></pre>

七、移动端去除input type为number的箭头

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }