h5移动端相关问题记录

禁止H5 ios滚动回弹，解决弹窗内滚动和页面同步滚动问题（页面为swiper整屏翻页）

引入inobounce.js
https://github.com/lazd/iNoBounce
需要滚动式 div加上 -webkit-overflow-scrolling: touch; 以及height

参考 https://www.cnblogs.com/haqiao/p/10417366.html

ios关闭软键盘页面不回弹(留言功能)

    $('textarea').on('blur',function(){
      window.scroll(0, 0)
    })

https://blog.csdn.net/MtangEr/article/details/86552257
https://blog.csdn.net/dongjing0813/article/details/89532495

ios上要点击两次提交键盘才消失

改click事件为touchstart，$("textarea").blur()

image.png

使用swiper整屏滑动时出现闪烁的问题

1. 父元素或body上

.swiper-container {
  transform:translate3d(0,0,0);
  overflow:hidden;
}

2. 子元素

.swiper-container .swiper-slide{
  -webkit-tap-highlight-color: transparent;
}

修复点击事件黑屏

body {
  -webkit-tap-highlight-color: transparent;
}

swiper滑动到下一页时播放背景音乐不生效

解决：利用swiper的touchStart事件监听，或者直接监听页面的touchstart

on: {
  touchStart: function() {
      // 注意！必须在touchStart中监听播放音乐才生效
      if(mySwiper.activeIndex === 0 && !isPaly) {
         let audio = document.getElementById('bgMusic')
         audio.load()
      }
   },
  slideChangeTransitionStart: function() {
     if(mySwiper.activeIndex === 1) {
        let audio = document.getElementById('bgMusic')
        audio.play()
        isPaly = true
     }
  },
}

video视频标签黑色边框怎么去掉

设置样式 object-fit: fill;

文字和数字的垂直（竖着）排列

• 文本垂直（竖向）排列
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
• 数字垂直或者（竖向）排列
  text-orientation: upright;

移动端打开web页面全屏

<meta name="apple-mobile-web-app-capable" content="yes">

https://www.imooc.com/article/43536

vant日历van-calendar自定义可选择日期

<van-calendar
  v-model="showCalendar"
  :show-confirm="false"
  @confirm="onConfirmCalender"
  :formatter="formatter"
/>

methods: {
    formatter(day) {
      let arr = ['2020/08/12', '2020/08/13', '2020/08/14']
      if (arr.includes(parseTime(day.date, '{y}/{m}/{d}'))) {
        day.type = ''
      } else {
        day.type = 'disabled'
      }
      return day
    }
}