Vue mobile sliding event v-touch makes simple swiper

Effect, change the background image when swiping

Use div dots to represent image status

A circular effect is achieved by setting border-radius: 50% on the picture in the box

github

https://github.com/vuejs/vue-touch/tree/next

 

Simple to use

   <!-- Renders a div element by default -->
    <v-touch v-on:swipeleft="onSwipeLeft" class="item">Swipe me!</v-touch>

    <!-- Render as other elements with the 'tag' prop -->
    <v-touch tag="a" v-on:tap="onTap" class="item">Tap me!</v-touch>

    <!--//左划      默认渲染为div   data为参数-->
    <v-touch @swiperight="onSwipeRight" class="item">Swipe me!</v-touch>
    <!--//点击   渲染为一个a标签-->
    <v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
    <!--//点击   渲染为p标签-->
    <v-touch tag="p" v-on:tap="onTap">Tap me!</v-touch>

 

Swipeable preview image

 

<template>
  <v-touch @swipeleft="prev" @swiperight="next">
    <div ref="img" class="img">
      <div class="dots">
        <div v-for="i,key in imgs" class="dot-base" :class="{'cur-dot':key==cur_img_index}"></div>
      </div>
    </div>
  </v-touch>
</template>

<script>
  export default {
    name: "swiper",
    data() {
      return {
        cur_img_index: 0,
        imgs: [
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=423921803,865481119&fm=27&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=519016328,2903928941&fm=27&gp=0.jpg',
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1321439853,1436775495&fm=27&gp=0.jpg'
        ]
      }
    },
    watch: {
      cur_img_index() {
        this.refresh()
      }
    },
    methods: {
      refresh() {
        this.$refs.img.style.background = `url('${this.imgs[this.cur_img_index]}')`
        this.$refs.img.style.backgroundSize = 'cover'
      },
      next() {
        this.cur_img_index = (this.cur_img_index + 1) % this.imgs.length
        console.log('next');
      },
      prev() {
        this.cur_img_index = (this.cur_img_index + this.imgs.length - 1) % this.imgs.length
        console.log('prev');
      },
    },
    mounted() {
      this.refresh()
    }

  }
</script>

<style scoped>


  .img {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column-reverse;
    justify-items: center;
    align-items: center;
  }

  .dots{
    display: flex;
    flex-direction: row;
  }
  .dot-base {
    width: 15px;
    height: 15px;
    background: gray;
    margin: 10px;
    border-radius:50%;
  }

  .cur-dot {
    background: lightskyblue;
  }
</style>

 

 

Use relative positioning to display images using img. With lazy loading (although it is not used...because only one image is displayed at a time)

<template>
  <v-touch @swipeleft="prev" @swiperight="next" class="container">
    <img v-lazy="imgs[cur_img_index]" class="img">
    <div class="dots">
      <div v-for="i,key in imgs" class="dot-base" :class="{'cur-dot':key==cur_img_index}"></div>
    </div>
  </v-touch>
</template>

<script>
  export default {
    name: "swiper",
    data() {
      return {
        cur_img_index: 0,
        imgs: [
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=423921803,865481119&fm=27&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=519016328,2903928941&fm=27&gp=0.jpg',
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1321439853,1436775495&fm=27&gp=0.jpg'
        ]
      }
    },
    watch: {
      cur_img_index() {
        this.refresh()
      }
    },
    methods: {
      refresh() {
        // this.$refs.img.style.background = `url('${this.imgs[this.cur_img_index]}')`
        // this.$refs.img.style.backgroundSize = 'cover'
      },
      next() {
        this.cur_img_index = (this.cur_img_index + 1) % this.imgs.length
        console.log('next');
      },
      prev() {
        this.cur_img_index = (this.cur_img_index + this.imgs.length - 1) % this.imgs.length
        console.log('prev');
      },
    },
    mounted() {
      this.refresh()
    }

  }
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
  }

  .img {
    width: 100vw;
    height: 100vh;
  }

  .dots {
    display: flex;
    position: absolute;
    bottom: 0px;
    flex-direction: row;
    border-radius: 30px;
    background: rgba(233, 233, 233, 0.3);
    margin: 10px;
    padding: 0px 10px;
  }

  .dot-base {
    width: 15px;
    height: 15px;
    background: white;
    margin: 10px;
    border-radius: 50%;
  }

  .cur-dot {
    background: orangered;
  }
</style>