Comment utiliser Swiper avec Vue3 ?-Voir.js-php.cn

Introduction

Utilisezswiperdansvue3pour obtenir l'effet d'images carrousel ; si des modules tels que les styles de composants sont introduits de manière incorrecte, il est très probable que la page n'aura pas ou vous souhaiterez peut-être que la flèche ou l'effet de commutation souhaité soit anormal. L'utilisation spécifique est la suivante :vue3中使用swiper, 实现轮播图的效果；如果组件样式等模块引入不当，很有可能导致，页面无效果；或者想要的箭头或者切换效果异常问题。具体使用方式如下所示：

使用方式

使用命令npm install swiper安装swiper插件；

在main.js里使用样式文件，如下所示：

import App from './App.vue' import router from './router' import VueAwesomeSwiper from 'vue-awesome-swiper'; import 'swiper/css'; createApp(App).use(VueAwesomeSwiper).use(router).mount('#app')

Copier après la connexion

在使用的页面，引入需要使用到的组件，比如常用的左右切换箭头，小圆点指示器等；如下所示：

import { Swiper, SwiperSlide } from 'swiper/vue' // 引入swiper样式（按需导入） import 'swiper/css/pagination' // 轮播图底面的小圆点 import 'swiper/css/navigation' // 轮播图两边的左右箭头 // import 'swiper/css/scrollbar' // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行 // 引入swiper核心和所需模块 import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper' const navigation = ref({ nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }); // 在modules加入要使用的模块 const modules = [Autoplay, Pagination, Navigation, Scrollbar] const prevEl = (item, index) => { // console.log('上一张' + index + item) }; const nextEl = () => { // console.log('下一张') }; // 更改当前活动swiper const onSlideChange = (swiper) => { // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex console.log(swiper.activeIndex) }

Copier après la connexion

在页面中使用组件和相关的模块

 Slide 1 Slide 2 Slide 3

Copier après la connexion

参数介绍：

modules：

loop：是否循环播放
slides-per-view：控制一次显示几张轮播图
space-between：每张轮播图之间的距离，该属性不可以和margin属性同时使用；
autoplay：是否自动轮播，delay为间隔的毫秒数；disableOnInteraction属性默认是true，也就是当用户手动滑动后禁用自动播放，设置为false后，将不会禁用，会每次手动触发后再重新启动自动播放。
navigation：定义左右切换箭头
pagination：控制是否可以点击圆点指示器切换轮播
scrollbar：是否显示轮播图的滚动条，draggable设置为true
Usage

Utilisez la commande npm install swiperpour installer le plug-in swiperDans

main.js Utilisez un fichier de style, comme indiqué ci-dessous : rrreee Dans la page que vous utilisez, introduisez les composants que vous devez utiliser, tels que les flèches de commutation gauche et droite couramment utilisées, les petits indicateurs de points, etc. ; : rrreee Utiliser les composants et les modules associés rrreeeIntroduction aux paramètres :modules:
       
        loop code> : s'il faut lire en boucle
diapositives par vue: contrôler le nombre d'images de carrousel affichées à la fois

        space-between: La distance entre chaque image du carrousel. Cet attribut ne peut pas être utilisé avec l'attributmargin: Si ; pour faire pivoter automatiquement,delayest le nombre de millisecondes de l'intervalle ; l'attributdisableOnInteractionest par défauttrue, c'est-à-dire lorsque l'utilisateur glisse manuellement. ,désactive la lecture automatiqueet définit Lorsqu'il est défini surfalse, il ne sera pas désactivé et la lecture automatique sera redémarrée après chaque déclenchement manuel.
        navigation: définissez les flèches de commutation gauche et droite
        pagination: contrôlez si vous pouvez cliquer sur l'indicateur de point pour changer de carrousel
        scrollbar: Indique s'il faut afficher la barre de défilement de l'image du carrousel. Définissezdraggablesurtruepour faire glisser la barre de défilement inférieure (. pendant le carrousel, Généralement cet attribut est rarement utilisé)
       

       Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!