vue写图片轮播图

最新推荐文章于 2023-10-04 17:09:17 发布

Sunny2011111

最新推荐文章于 2023-10-04 17:09:17 发布

阅读量1k

点赞数

分类专栏：前端文章标签： h5 vue

本文链接：https://blog.csdn.net/Sunny2011111/article/details/97114482

版权

本文介绍如何在Vue项目中通过安装和使用v-touch库来创建一个图片轮播效果。首先，你需要通过npm安装v-touch库：`npm i v-touch --save-dev`。

摘要由CSDN通过智能技术生成

需要先安装v-touch：npm i v-touch --save-dev

<template>
  <div class="wrap">
    <v-touch class="img-wrap" ref="parent" @pan="onTouchMove" @panend="onTouchEnd">
      <!-- 这里是动态插入的图片 -->
    </v-touch>
  </div>
</template>

<script>
export default {
  computed: {
    parent () {
      return this.$refs.parent.$el;
    },
    children () {
      return this.parent.children;
    },
    listLen () {
      return this.list.length;
    }
  },
  data () {
    return {
      curIndex: 0,
      list: [
        'http://f12stag.kkmh.com/game/190412/OFIBO9jks.png',
        'http://f12stag.kkmh.com/game/190103/MvNxrVmuQ.png',
        'http://f12stag.kkmh.com/game/190222/JzLnPhqj5.png'
      ],
      imgStyle: 'position: absolute; top: 0; left: 0; width: 200px; height: 100px; transition: all 1s; border: solid blue 1px;',
      preImgS