H5开发踩坑记录(总有你用的到的,持续更新)

本文汇总了前端开发中常见的问题及解决方案,包括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;
  }

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值