[游戏开发]前端-移动端滑动图片-进阶VUE版

预览

代码

<template>
  <div :style="style" style="position:relative;">
    <div  style="position: relative;width:90%;height:30%;" v-for="(item,index) in list" :key="'_'+index">
      <img class="imgs" v-for="(url,img_i) in item" :key="img_i" :src="url" @touchstart="touch_start($event,img_i)" @touchmove="touch_move($event,img_i)" @touchend="touch_end($event,img_i)">
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      style: {},
      style01:{},
      potition: 0, // 点击位置
      imgs: [], // 点击的图片
      width: 0, // 屏幕宽
      height: 0, // 屏幕高
      list: [
        ['https://img0.baidu.com/it/u=925998594,1358415170&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653277858&t=51e1c2c45186f2ab47a4a33b65346dfd',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21031FKU44S6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653277858&t=d6873329d7be390040bb920e46628709'
        ],
        ['https://img0.baidu.com/it/u=925998594,1358415170&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653277858&t=51e1c2c45186f2ab47a4a33b65346dfd',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21031FKU44S6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653277858&t=d6873329d7be390040bb920e46628709'
        ],
        ['https://img0.baidu.com/it/u=925998594,1358415170&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653277858&t=51e1c2c45186f2ab47a4a33b65346dfd',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21031FKU44S6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653277858&t=d6873329d7be390040bb920e46628709'
        ],
        ['https://img0.baidu.com/it/u=925998594,1358415170&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653277858&t=51e1c2c45186f2ab47a4a33b65346dfd',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21031FKU44S6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653277858&t=d6873329d7be390040bb920e46628709'
        ],
      ]
    };
  },
  created() {
    let width = window.innerWidth;
    let height = window.innerHeight;
    this.width = width;
    this.height = height;
    this.style = { 'width': width+'px', 'height': height+'px'};
    // 设置事件捕捉方式，当true时为capture(由外向内,取消冒泡),默认为false时为bubbling(由内向外，也就是冒泡)
    document.addEventListener('touchstart', () => {
    }, true);
    document.addEventListener('touchmove', () => {
    }, true);
    document.addEventListener('touchend', () => {
    }, true);
  },
  methods: {
    touch_start(e) {
      this.imgs = e.path[1].querySelectorAll('.imgs');
      this.position = parseInt(e.changedTouches[0].clientX);
    },
    touch_move(e, index) {
      // 获取手指按下位置
      let x = parseInt(e.changedTouches[0].clientX);
      // 手指向左滑动
      if (x < this.position) {
        this.imgs[index].style.transform = 'translateX(' + parseInt(x - this.position) + 'px)';
      }
      // 手指向右滑动
      if (x > this.position) {
        this.imgs[index].style.transform = 'translateX(' + parseInt(x - this.position) + 'px)';
      }
    },
    touch_end(e, index) {
      // 获取手指滑动值
      let distance = parseInt(e.changedTouches[0].clientX) - this.position;
      // // 获取屏幕宽/5
      let step = parseInt(-(this.width / 5));
      // // 当前图片恢复初始位置
      this.imgs[index].style.transform = 'translateX(0)';
      // 上一张
      console.log(distance);
      if (distance<0 && Math.abs(distance) > step) {
        // // 循环处理图片
        for (let i = 0; i < this.imgs.length; i++) {
          // 当前选择的图片放到最底层
          if (index == i) {
            this.imgs[i].style.zIndex = '-2';
          }
          // 不是当前选择的图片放到底层
          if (index != i) {
            this.imgs[i].style.zIndex = '0';
          }
          // 即将显示的图片放到中间层
          if (index - 1 == i) {
            this.imgs[i].style.zIndex = '1';
          }
        }

      }
      // 下一张
      if (distance>0 && Math.abs(distance) > step) {
        for (let i = 0; i < this.imgs.length; i++) {
          // 当前选择的图片放到最底层
          if (index == i) {
            this.imgs[i].style.zIndex = '-2';
          }
          // 不是当前选择的图片放到中间层
          if (index != i) {
            this.imgs[i].style.zIndex = '1';
          }
          // 即将显示的图片放到最底层
          if (index + 1 == i) {
            this.imgs[i].style.zIndex = '0';
          }
        }

      }
    },

  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.imgs {
  height: 50%;
  width: 50%;
  margin-left: 25%;
  margin-top: 30%;
  position: absolute;
}
</style>

阅读世界，共赴山海

423全民读书节，邀你共读