vue2+swiper5

发布： • 经验百科

 

 

<template>
  <swiper :options="swiperOption" @swiper="onSwiper" @slideChange="onSlideChange" class="swiper">
    <swiper-slide>
      <h1>全新视觉设计</h1>
      <p>全新构架、全新界面，带来前所未有的视觉体验</p>
      <div class="bts">
        <el-button type="danger">ios版</el-button>
        <el-button type="danger">安卓版</el-button>
      </div>
    </swiper-slide>
    <swiper-slide>456</swiper-slide>
    <swiper-slide>789</swiper-slide>
    <!-- 分页器 -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!-- 切换按钮 -->
    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>-->
  </swiper>
</template>
<script>
export default {
  data () {
    return {
      swiperOption: {
        slidesPerView: 1,
        // 设置分页器
        pagination: {
          el: '.swiper-pagination',
          // 设置点击可切换
          clickable: true
        },
        mousewheel: {
          eventsTarged: '.swiper',
        },
        // 设置前进后退按钮
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev'
        // },
        // 设置自动轮播
        // autoplay: {
        //   delay: 5000 // 5秒切换一次
        // },
        // 设置轮播可循环
        // loop: true,
        // 设置纵向切换
        direction:"vertical"
      }
    }
  },
  methods: {
    onSwiper () {
      console.log(11);
    },
    onSlideChange () { //swiper-slide切换时触发
      console.log(22);
    }
  }
}
</script>

 

推荐这些文章：

vue2 中如何使用swiper

1. npm i swiper  //安装swiper
2.main.js
 // 导入swiper样式

import "swiper/css/swiper.css"
 
3.组件中
　　

<template>

  <div class="swiper" style='overflow: hidden;text-align:center'>
    <div class="swiper-wrapper">
        <div class="...

swiper在vue2中使用-案例篇

案例
1.图片左右滚动
上图
       
 
效果描述
 
 第一行向左滚动
第二行向右滚动
代码
ScrollImg组件

<template>
<swiper :options="swiperOption"
:dir="derection"
class="companySP__srollImg">
<swiper-slide class="companySP__srollImg__item"
v-...

Swiper 7在项目vue2中的引用

参考出坑https://blog.csdn.net/u012570307/article/details/107203851/
 
一、安装
首先看看官网 https://www.swiper.com.cn/api/navigation/355.html

 
安装

 
 
因为我本地安装这样是无效，版本也不太对
==============
所以我直接安装

cnpm i swiper@7 vue-awesome-swiper@4 -S

 
二、案例实现
2.1 demo1 自动定时横向滚动条

 
横向滚动（不知道怎么放视...

maven资源过滤设置

<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
</includes>
...

去除button默认样式

不加样式之前的： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <button>按钮</button> </body> </html>...

简单电子日历.html

电子日历!

点击查看代码
<!DOCTYPE html>
<html>
<head>
<title>简单电子日历的设计与实现</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.cnblogs.com/fzlgxy085/p/css/calendar.css">
<script src="https://www.cnblogs.com/fzlgxy085/p/js/calen...

div隐藏滚动条，仍可滚动

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #header{ position:absolute; background-color: #000000; color:white; top: 0px; left: 0px; r...

在vue2的cli中使用轮播图swiper.js插件

在vue2.x中使用的swiper版本过高的话可能会导致轮播图部分功能无法实现，最好使用 swiper5.X版本，一下是操作步骤：
1.下载swiper插件
npm i swiper@5

2.引入swiper插件及其样式
- 首先在要使用轮播图的vue界面<script></script>引入插件
import Swiper from "swiper";
- 然后引入样式（注：这里是在main.js里全局引入）
import "swiper/css/swiper.css";
3.初始化轮播图
htmL
<div class="s...

VUE 3 el-table 表格 单击传递参数到方法--正常使用

<el-table-column label="操作" width="100"> <template v-slot="scope"> //把父标签的内容传递到方法内 <el-button size="small" @click="edit(scope.row)">修改</el-button> </template> </el-table-column> 　　 ...

升级的插槽slot

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='lib/vue.js'></script>
</head>
<body>
<div id="bo...

文章标题：vue2+swiper5
文章链接：https://www.dianjilingqu.com/4225.html
本文章来源于网络，版权归原作者所有，如果本站文章侵犯了您的权益，请联系我们删除，联系邮箱：saisai#email.cn，感谢支持理解。
THE END
< <上一篇
下一篇>>