记录一下第一个正儿八经的移动端页面

怎么说呢…从两年前的vue小白 到现在的vue大白 虽然还是后端式前端开发但是自己感觉到确实是进步不少。
首先非常感谢若依 太牛了这玩意 正是一直用若依才有了今天这点前端技术，自从使用若依以来到现在这么长时间 面向百度开发 一边学一边做 本来还是一直基于若依在开发———直到最近 领导说要把一个移动端页面接入到我用若依开发的平台里面 本来还很抗拒 不过胳膊拗不过大腿 本来以为开发不了的东西没想到还真给搞出来了，也没那么复杂的需求，也没太炫酷的页面，虽然比较简单，但是也算是前端开发的一个节点了吧，还是记录一下。
还是直接上代码

与后端交互的逻辑没有写 只是纯前端的一个页面。

一直是做web端的 没想到做到最后这个页面手机端适配的一点问题没有 web端不能用了 哈哈

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<template>
  <div class="makeAppindex">
    <el-main>
      <el-row style="height:10%;">
        <h2 style="color:#030303">众乐</h2>
      </el-row>
      <el-row style="height:10%;">
        <el-col :lg="8" :md="8" :sm="8" :xs="8">
          <img src="./images/人.png">
        </el-col>
        <el-col :lg="8" :md="8" :sm="8" :xs="8">
          <!--<img src="./images/连接.png">-->
          <img src="./images/未连接爱心.png">
        </el-col>
        <el-col :lg="8" :md="8" :sm="8" :xs="8">
          <img src="./images/人.png">
        </el-col>
      </el-row>
      <el-row style="height:10%;">
        <p style="color:red;margin-top: -15px">已连接</p>
      </el-row>

      <el-row style="width:85%;height:55%;background-color: #E9E9E9;border-radius: 15px;margin-left: 7.5%;">
        <div style="width: 100%; height: 100%;">
          <img ref="imgurl" style="width: 0.01%" src="./images/1.png">
          <div class="demo"></div>
        </div>
        <!--<el-row></el-row>
        <el-row>
          <el-col :lg="6" :md="6" :sm="6" :xs="6" v-for="index in [1,2,3,4]">
            <p></p>
            <img style="width: 100%" :class="'img'+index" src="./images/爱心2x.png">
          </el-col>
        </el-row>-->
        <!--<div v-for="index in [1,2,3,4]" style="width: 25%; height: 25%;float: left">
          <img style="width: 80%;" :class="'img'+index" src="./images/爱心2x.png">
        </div>-->

      </el-row>
      <el-row style="height:15%;">
        <el-col :lg="8" :md="8" :sm="8" :xs="8"><p></p></el-col>
        <el-col :lg="8" :md="8" :sm="8" :xs="8"
                @click.native="imgclick"
                @mouseup.native="gotouchmove"
                @touchstart.native="gotouchstart"
                @touchmove.native="gotouchmove"
                @touchend.native="gotouchend"
        >
          <img src="./images/发射.png">
        </el-col>
        <el-col :lg="8" :md="8" :sm="8" :xs="8"></el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>

  let lastTouchEnd = 0  //更新手指弹起的时间
  document.documentElement.addEventListener("touchstart", function (event) {
    //多根手指同时按下屏幕，禁止默认行为
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  document.documentElement.addEventListener("touchend", function (event) {
    let now = (new Date()).getTime();
    if (now - lastTouchEnd <= 100) {
      //当两次手指弹起的时间小于500毫秒，认为双击屏幕行为
      event.preventDefault();
    } else { // 否则重新手指弹起的时间
      lastTouchEnd = now;
    }
  }, false);
  //阻止双指放大页面
  document.documentElement.addEventListener("gesturestart", function (event) {
    event.preventDefault();
  });
  //禁止safari拖动
  document.body.addEventListener('touchmove', function (e) {
    e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
  }, {passive: false}); //passive 参数不能省略，用来兼容ios和android

  import $ from 'jquery'
  export default {
    metaInfo() {
      return {
        title: '点逗远程控制页面',
        timer: 0,
        timeOutEvent: 0,
      }
    },
    data() {
      return {}
    },
    created() {
    },
    mounted() {
    },
    beforeDestroy() {
      clearInterval(this.timer);
      clearTimeout(this.timeOutEvent);
    },
    methods: {
      imgclick() {
        /*console.log("点击事件");*/
        var x =1;
        var y = 200;
        var num = Math.floor(Math.random() * 3 + 1);
        var index=$('.demo').children('img').length;
        var rand = parseInt(Math.random() * (x - y + 1) + y);
        $(".demo").append("<img style='width: 5%;position: absolute;bottom: 0%;left: 48%;webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);' class=img"+index+" src=''>");
        var imgclass = ".img"+index;
        console.log(this.$refs.imgurl.src)
        $(imgclass).attr('src',this.$refs.imgurl.src)
        $(imgclass).animate({
          bottom:"70%",
          opacity:"0",
          width: "40%",
          left:rand,
        },2000);
      },
      //鼠标按下事件
      gotouchstart() {
        this.timeOutEvent = setTimeout(() => {
          console.log("开始长按事件")
          this.timer = setInterval(() => {
            this.imgclick()
          }, 300)
        }, 300);
      },
      //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
      gotouchend() {
        console.log("手指释放")
        clearTimeout(this.timeOutEvent);
        clearInterval(this.timer);
      },
      //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
      gotouchmove() {
        /*console.log("手指移动或手指抬起")
        clearInterval(this.timer);
        clearTimeout(this.timeOutEvent);*/
      },
    }
  }
</script>
<style lang="scss" scoped>
  * {
    //去除长按效果 ----复制
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //去除点击阴影框
  }

  .makeAppindex {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
  }

  .el-row {
    height: 20%;
    width: 100%;
    text-align: center;
  }

  .el-main {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
  }

  //禁止长按保存
  img {
    width: 50%;
    pointer-events: none;
  }

</style>

最后附上效果图