shopid.ir ->open source online shop solutions
پست ورقه ای یا اسلایدی با 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
مطلبی دیگر از این نویسنده
لاگین با گوگل در لاراول
مطلبی دیگر در همین موضوع
چگونه برنامه نویسی را شروع کنیم؟
بر اساس علایق شما
بریم که داشته باشیم! (طنز و تراژدی زمانه) - به روز رسانی ۲