پست ورقه ای یا اسلایدی با vue2 و vue3

توی خیلی از قسمت های سایت ها مخصوصا قسمت تصاویر خیلی وقتا نیازه که قسمت هایی به صورت ورقه ای (یعنی کاربر با انگشت به چپ یا راست ورق بزنه) داشته باشیم

درست کردن همچین چیزی کار سختی نیست ولی یک سری ریزه کاری ها داره مثلا ریسپانسیو بودنش و سازگاری با ماوس و تاچ (لمسی) بودن دستگاه کاربر و خیلی موارد دیگه

مشاهده نمونه ی زنده توی استکبلیتز

https://stackblitz.com/edit/vue-xsw3r9

آموزش این پست به صورت ویدیو توی آپارات

https://www.aparat.com/v/Q0Tt5

آموزش این پست به صورت ویدیو توی یوتوب :

https://www.youtube.com/watch?v=M-6HSVe4LcE

انجام این کار توی vue با پکیچ swipBox خیلی راحته و تنها کاری که باید بکنید اینه که از طریق npm نصبش کنید و توی کامپوننت مد نظرتون هرجا خواستید اجرا کنید

برای ویو نسخه ۳

npm i @shopid/vue3-swipe-box

برای نسخه ۲

npm i @shopid/vue2-swipe-box

اول ایمپورتش میکنیم

import SwipeBox from '@shopid/vue3-swipe-box';

بعد توی تمپلیت اینجوری ازش استفاده میکنیم

<SwipeBox>
<div class="box">
   <div>item1</div>
   <div>item2</div> 
   <div>item3</div>
   <div>item4</div>
</div>
</SwipeBox>

اول یه دونه SwipeBox میسازیم بعد یدونه المنت که اینجا div هست به عنوان باکس میسازیم

بعد هر المنت دیگه ای توش باشه به عنوان یه ورق حساب میشه تمام !

این پکیج از راست به چپ و چپ به راست پشتیبانی میکنه (rtl , ltr)

با تاچ و ماوس کار میکنه و سرعت انیمیشن مگنتش هم قابل تغییره

مقدار

این مقدار زمانی صدا زده میشه که کاربر ورق بزنه و اینکسشو برمیگردونه

مقدار speed

این همون سرعت انیمیشن مگنته که وقتی ورق میزنه چقدر تند بچبسه که برحسب میلی ثانیه کار میکنه

متد های swipetoNext , swipetoPrevious , goTo

اینام که از اسمشون مشخصه برای دستی جلو عقب کردن و رفتن به اینکس اسفتاده میشه

برای استفاده ازینا کافیه یه ref بزنید به SwipeBox و اینجوری صداشون بزنید

this.$refs.myswipe.swipetoNext()

مثال کامل :

<template>
  <div id="app">
    <SwipeBox ref="myswipe" @="mySwipeChanged" speed="150">
      <div style="width: 200px; height: 200px; border: 1px solid black">
        <div v-for="image in images" :key="image.id">
        <img :src="image.url" />
        </div>
      </div>
    </SwipeBox>

    <button @click="next">next</button><br />
    <button @click="previous">previous</button><br />
    <button @click="goto2">goto index #2</button><br />
  </div>
</template>


import SwipeBox from '@shopid/vue2-swipe-box';

export default {
  name: 'App',
  components: {
    SwipeBox,
  },
  data: () => {
    return {
      images: [
        { id: '1', url: 'https://picsum.photos/200' },
        { id: '2', url: 'https://picsum.photos/200?2' },
        { id: '3', url: 'https://picsum.photos/200?3' },
        { id: '4', url: 'https://picsum.photos/200?4' },
        { id: '5', url: 'https://picsum.photos/200?5' },
      ],
    };
  },

  methods: {
    mySwipeChanged: function (index) {
      console.log('index' + index);
    },

    next: function (x) {
      this.$refs.myswipe.swipetoNext();
    },
    previous: function (x) {
      this.$refs.myswipe.swipetoPrevious();
    },
    goto2: function () {
      this.$refs.myswipe.goTo(2);
    },
  },
};

سورس توی گیتهاب :

https://github.com/shopid-dev/vue3-swipe-box

https://github.com/shopid-dev/vue2-swipe-box