swiper在vue中的简单使用方法

2024-12-04 10:43:11

本次使用的是 swiper5，swiper 不同版本在使用的过程会有一些差别

说明：本次示例中 skuImageList 是图片列表，由父组件从服务器获取然后传给这个轮播子组件使用

服务器返回的数据结构如下，一个数组包含了几个对象，对象里有图片

html 结构，根据自己的需要进行删减，本次只保留了前进后退按钮

<template>
  <div style="width: 350px;">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in skuImageList" :key="item.id">
          <img :src="item.imgUrl" alt="" />
        </div>
      </div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

js部分

说明：本次使用swiper5，因为是从服务器获取的数据，所以放在了 updata 生命周期中。

本次设置了轮播显示的图片数量，以及轮播图片的高度。

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  name: "Smallswiper",
  props: ["skuImageList"],
  updated() {
    new Swiper(".swiper-container", {
      loop: true, // 循环模式选项
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
       slidesPerView: 3, // 显示几个
       height:100, // swiperlide 高度
    });
  },

slidesPerView: 3, // 显示几个 height:100, // swiperlide 高度。更多其他的自定义轮播设置可以参照官方 API

也可在 watch 监听数组 skuImageList 是否发生变化利用 thsi.$nextTick() 触发页面更新

watch: {
    skuImageList() {
      //保证数据发生修改,页面结构再次渲染完毕。在初始化Swiper实例
      this.$nextTick(() => {
        //初始化Swiper类的实例
        var mySwiper = new Swiper(".swiper-container", {
          //设置轮播图防线
          direction: "horizontal",
          // loop:true,
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          //展示区域同时展示三张图片
          slidesPerView: 2,
        });
      });
    },

样式：--swiper-navigation-size: 20px;/* 设置按钮大小 */

<style lang="scss" scoped>
img {
  width: 50px;
  height: 75px;
}
.swiper-container {
  width: 350px;
  --swiper-navigation-size: 20px;/* 设置按钮大小 */
}
.swiper-slide{
  left: 30px;
}

</style>

更多的其他设置可以参照 api 中文api - Swiper中文网

最后效果：

总结

到此这篇关于swiper在vue中的简单使用的文章就介绍到这了,更多相关swiper在vue的使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue2.0使用swiper组件实现轮播的示例代码

1.安装swiper npm install swiper@3.4.1 --save-dev 2.引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.html页面代码 <div class="swiper-container" id="swiper"> <div class="swiper-wrapper"> <di
Vue封装Swiper实现图片轮播效果

图片轮播是前端中经常需要实现的一个功能.最近学习Vue.js,就针对Swiper进行封装,实现一个简单的图片轮播组件. 一.Swiper 在实现封装之前,先介绍一下Swiper. Swiper是纯Javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择. Swiper的应用场景广泛,实现效果很好,下面个这实际案例就是Swiper的典
vue中引用swiper轮播插件的教程详解

有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div
vue使用swiper实现中间大两边小的轮播图效果

项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swiper的css文件- swiper.min.css 第二部:写入dom结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item,
vue3.x使用swiper实现卡片轮播

本文实例为大家分享了vue3.x使用swiper实现卡片轮播的具体代码,供大家参考,具体内容如下版本号: vue/cli:4.5.12swiper:^6.8.4 安装 npm install --save swiper 使用以及配置 <div class="swiper-container home_swiper"> <div class="swiper-wrapper"> <div class="s
vue2.0使用swiper组件实现轮播效果

轻松实现vue2.0轮播效果,供大家参考,具体内容如下 1.安装swiper npm install swiper@3.4.1 --save-dev 2.引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.html页面代码 <div class="swiper-container" id="swiper"> <div class="swi
vue使用swiper插件实现轮播图的示例

hello大家好,最近我在做一个仿饿了么的项目,我会将我的项目经验同步到这里,与大家分享! vue - 使用swiper插件实现轮播图下载安装: npm install swiper --save Msite.vue的HTML部分:  <div class="swiper-container"> <div class="swiper-wrapper"> <div
vue中使用swiper轮播图的正确姿势(亲测有效)

目录前言 1.新建vue项目 2.装swiper的包 3.使用swiper 总结前言网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的,吐槽完毕.假设你是个新手,我从新建项目开始跟你讲,以下是步骤. 1.新建vue项目 vue create 项目名然后选最下面那一个(键盘上下键操作)然后回车选择Bable,Router,Vuex,Css-Processords四个,其他的不要选中(空格键是选中和取消选中) 剩下的步骤按这张图来进行选择,然后项目就创建
swiper在vue中的简单使用方法

本次使用的是 swiper5,swiper 不同版本在使用的过程会有一些差别说明:本次示例中 skuImageList 是图片列表,由父组件从服务器获取然后传给这个轮播子组件使用服务器返回的数据结构如下,一个数组包含了几个对象,对象里有图片 html 结构,根据自己的需要进行删减,本次只保留了前进后退按钮 <template> <div style="width: 350px;"> <div class="swiper-container&
在vue中实现简单页面逆传值的方法

[需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中,页面跳转 A -> B -> C,到 C 页面后,内存中一直存储着 A 和 B 页面的数据和状态,通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等,另外还有代理,block传值等操作. vue是一个单页应用,轻量,并且不会重复下载数据.当它从一个页面跳转到另一个页面时,原来的页面的vue实例和
解决vue中使用swiper插件问题及swiper在vue中的用法

Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas
Vue 中使用 typescript的方法详解

什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty
vue中使用vue-pdf的方法详解

需求:简单说~~有两个pdf文件需在h5上展示,通过点击按钮切换不同文件的显示注: 1.vue-pdf默认展示首页,我这里的需求是通过滑动展示所有页面,这里使用的v-for遍历.有多少页就加载了多少个pdf组件. 2.pdf文件存在跨域问题,这个需要后端同学支持. 3.demo上的pdf文件只有一页,测试多页展示,自己改用多页pdf文件即可 <template> <div class="pdf_wrap"> <div class="pdf_li
Vue中使用Teleport的方法示例

目录正文 Teleport 在 Vue 中的使用禁用 Teleport 标签正文通常,当我们在 Vue 中创建组件时,它们出现在我们期望的 DOM 结构中.但是,有时我们并不希望如此.一个很好的例子就是模态框——通常,模态框应该出现在页面上所有内容的顶部——所以如果我们在逻辑上在具体的组件中创建它,它可能会出现在某些 HTML 元素后面或需要一些奇怪的 CSS 样式让它达到顶部. 幸运的是,在 Vue 中有一种简单的方法可以解决这个问题,称为. 标签允许我们在组件中定义一些东西,然后在代
Hangfire在ASP.NET CORE中的简单实现方法

hangfire是执行后台任务的利器,具体请看官网介绍:https://www.hangfire.io/ 新建一个asp.net core mvc 项目引入nuget包 Hangfire.AspNetCore hangfire的任务需要数据库持久化,我们在Startup类中修改ConfigureServices 然后在Configure方法中启用hangfire中间件现在我们运行一下项目,可以看到,数据库里自动生成了很多表,这些表就是用来持久化任务的我们打开如下地址,可以看到hangfir
在Vue中使用echarts的方法

上篇文章给大家介绍了在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入上面全局引入会将所有的echarts图表打包,导致体积过大,我
vue中使用cropperjs的方法

用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结: 在使用之前,先引入: 在项目里,运行: npm install cropperjs -save 在template里: <div id="demo">  <div class="container" v-show="panel">
vue中实现methods一个方法调用另外一个方法

vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法可以在调用的时候 this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法: new Vue({ el: '#app', data: { test:111, }, methods: { test1:function(){ alert(this.test) }, test2:function(){ alert("this

swiper在vue中的简单使用方法

相关推荐

随机推荐