1.禁止拖动

在mounted中写入

    var mo = function (e) {
            e.preventDefault();
        }
        document.body.style.overflow = "hidden";
        document.addEventListener("touchmove", mo. false);// 禁止页面滑动

2.sessionstronge和localstronge配合v-if使用时的一些问题

本地存储时会转换为string，所以如果存布尔值的话需要通过 Boolean()转换为布尔值

存

localStorage.elc2=899

取

window.sessionStorage.getItem('elc2')

删除指定元素

window.sessionStorage.removeItem('elc2')

清除

window.sessionStorage.clear()

3.开发过程

开发时要全屏，不允许有拖动

4.ios中消除下面左右箭头

push带有返回属性，replace直接在堆栈中添加

this.$router.reqlace()
替换
this.$router.push()
或者在
<router-link to='sz' replace>   </router-link>

5.更新网页后添加参数实现页面刷新

6.分享链接后打开分享页面为主页面

 beforeCreate(){
    this.$router.replace('/')
  },

7.项目优化

图片处理方案

对图片进行压缩

对图片进行预加载

for (let img of this.arr) {
      let image = new Image()
      image.src = img
      image.onload=()=>{
      }
    }

项目进行扁平化开发

减少不必要的DIV盒子，直接img标签

组件化开发

通过components组件化开发对重复代码进行优化

另一种预加载方法

引入preloadsjs

 

npm install preload-js --save

初始化

 var createjs = require('preload-js')//或者
 import createjs from 'preload-js'
 load() {
      let arr = [
        "x1.png",
        "x2.png",
        "nav.png",
        "p1_1.png",
        "p1_2.png",
        "bg1.jpg",
        "star1.png",
        "star2.png",
        "star3.png",
      ];
      var queue = new createjs.LoadQueue();//图片的预加载
​
      for (let i = 1, len = arr.length; i <= len; i += 1) {
        let src = require("@/assets/img/" + arr[i - 1]);
        queue.loadFile({ id: arr[i - 1], src });
      }
    },

截取视频第一帧

 <video ref="video" id="video-s" v-if="url.indexOf('http') !== -1"
                style="animation-delay: 1s;animation-duration: 1.5s;" controls="" :src='`${url}?${Math.random()}`'
                :poster="`${url}?x-oss-process=video/snapshot,t_2000,f_jpg,m_fast`" class="video-a" />