توی خیلی از قسمت های سایت ها مخصوصا قسمت تصاویر خیلی وقتا نیازه که قسمت هایی به صورت ورقه ای (یعنی کاربر با انگشت به چپ یا راست ورق بزنه) داشته باشیم
درست کردن همچین چیزی کار سختی نیست ولی یک سری ریزه کاری ها داره مثلا ریسپانسیو بودنش و سازگاری با ماوس و تاچ (لمسی) بودن دستگاه کاربر و خیلی موارد دیگه
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)
با تاچ و ماوس کار میکنه و سرعت انیمیشن مگنتش هم قابل تغییره
این مقدار زمانی صدا زده میشه که کاربر ورق بزنه و اینکسشو برمیگردونه
این همون سرعت انیمیشن مگنته که وقتی ورق میزنه چقدر تند بچبسه که برحسب میلی ثانیه کار میکنه
اینام که از اسمشون مشخصه برای دستی جلو عقب کردن و رفتن به اینکس اسفتاده میشه
برای استفاده ازینا کافیه یه 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