首页 > 其他分享 >Vue3 使用 vant中的swipe,添加左右箭头切换轮播

Vue3 使用 vant中的swipe,添加左右箭头切换轮播

时间:2023-03-08 09:44:15浏览次数:58  
标签:vant app swipe Vue3 ref swiper 轮播

vant 中的 swipe 是带有左右箭头切换轮播方法的,只不过文档中没有相关的案例。

 

 

我这边使用的是 vue3 ts 写的这个功能。

页面部分

 

 

 

定义一个方法,ref="swiper"

 

 js部分

 1 <script lang="ts" setup>
 2 import { createApp, ref } from 'vue'; 
 3 import { Swipe, SwipeItem } from 'vant'; 
 4 
 5 const app = createApp(); 
 6 app.use(Swipe); 
 7 app.use(SwipeItem);
 8 
 9 const swiper:any = ref(null)
10 function prev() {
11     swiper.value.prev();
12 }
13 
14 function next() {
15     swiper.value.next();
16 }
17 
18 </script>

 

标签:vant,app,swipe,Vue3,ref,swiper,轮播
From: https://www.cnblogs.com/wjm956/p/17190869.html

相关文章