1、input框失焦后页面没有回弹
解决办法为：在聚焦时，获取当前滚动条高度，然后失焦时，赋值之前获取的高度：
// 方法一：
// 用于blur
// inputBlur () {
// const timer = setTimeout(() => {
// const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
// window.scrollTo(0, Math.max(scrollHeight - 1, 0))
// clearTimeout(timer)
// console.log('滚动顶部')
// }, 100)
// },
// 方法二
// export default {
// data () {
// return {
// scrolltop: 0
// }
// }
// methods: {
// focus () {
// this.scrollTop = document.scrollingElement.scrollTop
// },
// blur () {
// document.scrollingElement.scrollto(0, this.scrolltop);
// }
// }
//}
2、图片转base64
生成海报时，往往是需要加入微信头像的。而npm上的生成海报的插件大多都需要将图片转为base64才能使用，不然会出错。这时就需要后端或者我们自己转换。
// function changeToBase64 (url) {
// return new Promise(resolve => {
// let img = new Image()
// img.crossOrigin = 'Anonymous'
// img.src = url
// img.onload = function () {
// let canvas = document.createElement('canvas')
// canvas.width = img.width
// canvas.height = img.height
// let ctx = canvas.getContext('2d')
// ctx.drawImage(img, 0, 0, img.width, img.height)
// resolve(canvas.toDataURL('image/png'))
// }
// })
// }
// function loadImage (url) {
// return new Promise(resolve => {
// const img = new Image()
// img.onload = function () {
// resolve(img)
// }
// img.src = url
// })
// }
// 具体用法
// async function change (avatar) {
// const avatarImg = await changeToBase64(avatar)
// avatarImg = await loadImage(avatarImg)
// return avatarImg
// }
3、图片背景使用100vh的问题
在微信中，跳转到别的路由时，屏幕下方会出现前进后退导航条。这时就会压缩页面显示高度，就会出现尴尬的局面：我们设置的刚刚好的布局，出现了可滚动（因为高度被压缩了），但是滚动到最下面的时候会有这个前进后退导航条的高度是空白的，背景没有覆盖到。这是因为使用了100vh属性。
// 解法方法一：
// 跳转路由的方法不用push，用replace
// this.$router.push('home') 改为 this.$router.replace('home')
// 这样就能避免屏幕下方会出现前进后退导航条
// 解决方法二：
// 在设定最低高度之后再自适应屏幕高度
// 因为我司的设计是基于iphone6的屏幕尺寸的。所以最低高度就是iphone6的高度
// min-height: 1208px;
// height: 100vh;
4、移动端active伪类无效
使用了vue的 @touchstart 和 @touchend 事件来实现了active伪类特效
<!-- <li class="list__item" v-on:touchstart="handleHref" v-for="(item) in list" :key="item.id" >
{{item.name}}
</li> -->
// .list__item{
// background: white;
// color: #333;
// &:active{
// background: linear-gradient(#FEBF00, #FF923A);
// color: white;
// }
// }
5、长列表元素点击事件
如果一个长列表中所有元素都需要点击事件，如果每个元素都注册一个事件那也太浪费性能了。这时就可以用委托的方法
<!-- <ul class="NCMcontainer FMlist__main" v-on:touchstart="handleHref">
<li class="list__text">请选择活动</li>
<li class="list__item" v-for="(item) in list" :key="item.id" :data-id='item.id' >
{{item.name}}
</li>
</ul> -->
// handleHref (e) {
// let token = e.target.nodeName.toLowerCase()
// let id = e.target.dataset.id
// if (token === 'li') {
// this.$router.push({path: 'home', query: {id: id}})
// }
// }
6、自动播放音乐
// html
<!-- <audio :src="music" preload="auto" controls loop id="bgMusic" autoplay></audio> -->
<!-- <img @click="audioPause('bgMusic')" v-show="!pause" src="../img/play.png" alt="">
<img @click="audioAutoPlay('bgMusic')" v-show="pause" src="../img/pause.png" alt=""> -->
// js
// 在methods中加入以下方法
// 音乐停止
// audioPause (id) {
// var audio = document.getElementById(id)
// audio.pause()
// this.pause = true
// document.addEventListener('WeixinJSBridgeReady', function () {
// audio.pause()
// }, false)
// document.addEventListener('YixinJSBridgeReady', function () {
// audio.pause()
// }, false)
// },
// 音乐开始
// audioAutoPlay (id) {
// var audio = document.getElementById(id)
// audio.play()
// this.pause = false
// document.addEventListener('WeixinJSBridgeReady', function () {
// audio.play()
// }, false)
// document.addEventListener('YixinJSBridgeReady', function () {
// audio.play()
// }, false)
// },
// 在组件挂载后自动播放
// mounted () {
// this.audioAutoPlay('bgMusic')
// }
