vue使用swiper（轮播图）-真实项目使用

一、安装
我直接安装的vue-awesome-swiper": "^3.1.3"指定版本

npm install vue-awesome-swiper@3.1.3 swiper --save

二、vue页面使用，写了一个小demo

<template><div class="vue-swiper"><h1>{{ msg }}</h1><div class="container"><swiper:options="swiperOption"ref="mySwiper"class="swiper-container-no-flexbox"><!-- 这种写法也可以 --><!-- <swiper-slide><img src="../../static/images/1.jpg" alt class="1"></swiper-slide><swiper-slide><img src="../../static/images/2.jpg" alt class="2"></swiper-slide><swiper-slide><img src="../../static/images/3.jpg" alt class="3"></swiper-slide><swiper-slide><img src="../../static/images/4.jpg" alt class="4"></swiper-slide><swiper-slide><img src="../../static/images/5.jpg" alt class="5"></swiper-slide> --><!-- 这种写法更常见 --><swiper-slide v-for="(item, index) in bugs1" :key="index"><img class="swiper-img" :src="item" alt="" /></swiper-slide></swiper></div></div>
</template><script>
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
import Swiper from "swiper";export default {name: "vueSwiper",data() {return {msg: "Vue-swiper",swiperOption: {notNextTick: true,loop: true, // 启循环模式，即滑动到最后一个 slide 后会自动切换到第一个 slide。slidesPerView: 3,centeredSlides: true,autoplay: {delay: 2000, // 自动播放间隔时间，单位为毫秒disableOnInteraction: false, // 用户操作后是否停止自动播放},forceToAxis: true, //鼠标竖向滚动无法控制横向切换slideToClickedSlide: true, //设置为true则点击slide会过渡到这个slide。grabCursor: true, // 当鼠标位于 swiper 上时显示抓取样式。setWrapperSize: true, // 根据 slides 的尺寸自动调整容器的尺寸。mousewheelControl: true, // 开启鼠标滚轮控制 swiper。observeParents: true, // 如果 swiper 元素有父级元素，并且父级元素的尺寸发生变化时，swiper 会重新初始化。},bugs1: ["http://g.hiphotos.baidu.com/zhidao/pic/item/c83d70cf3bc79f3d6e7bf85db8a1cd11738b29c0.jpg","http://big5.wallcoo.com/photograph/summer_feeling/images/%5Bwallcoo.com%5D_summer_feeling_234217.jpg","https://img0.baidu.com/it/u=4281860672,1981139753&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=320","https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",],};},
};
</script><style lang="scss" scoped>
.container {// width: 500px;overflow: hidden;margin: 0 auto;border: 1px solid #000;
}
img {max-width: 100%;display: block;
}
.swiper-slide-shadow-right,
.swiper-slide-shadow-left {background-image: none !important;opacity: 0 !important;
}.swiper-slide {transform: scale(0.7);transition: all 0.3s linear;
}
.swiper-slide.swiper-slide-active {transform: scale(1);
}
@import "../../node_modules/swiper/dist/css/swiper.min.css";
</style>

三、真实项目使用

<template><div class="cve-wrapper"><h1>数据库中找到的 CVE</h1><div class="pcSwiper"><swiper:options="swiperOption"ref="mySwiper"class="swiper-container-no-flexbox"><swiper ref="mySwiper" class="swiper-wrapper1" :options="swiperOption"><swiper-slidev-for="(val, index) in bugs1":key="index"class="swiper-box"><div class="swiperItem"><div class="tag-list"><p class="stag">{{ val.name }}</p><p class="stag">{{ val.reference.length }}个</p></div><div class="ref-list"><template v-for="(value, indexs) in val.reference"><p v-if="indexs < 8" class="stag">{{ value }}</p></template></div></div></swiper-slide></swiper><swiperref="swiper2"style="margin-top: 24px"class="swiper-wrapper2":options="swiperOptions2"><swiper-slidev-for="(val, index) in bugs2":key="index"class="swiper-box"><div class="swiperItem"><div class="tag-list"><p class="stag">{{ val.name }}</p><p class="stag">{{ val.reference.length }}个</p></div><div class="ref-list"><template v-for="(value, indexs) in val.reference"><p v-if="indexs < 8" class="stag">{{ value }}</p></template></div></div></swiper-slide></swiper></swiper></div></div>
</template><script>
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
import bugs from "/@/utils/data/yhBugs";export default {name: "vueSwiper",data() {return {msg: "Vue-swiper",bugs,swiperOption: {spaceBetween: 24,notNextTick: true,loop: true,slidesPerView: 3,centeredSlides: true,autoplay: {delay: 0, // 自动播放间隔时间，单位为毫秒disableOnInteraction: false, // 用户操作后是否停止自动播放},speed: 6000,forceToAxis: true, //鼠标竖向滚动无法控制横向切换slideToClickedSlide: true, //设置为true则点击slide会过渡到这个slide。grabCursor: true,setWrapperSize: true,// mousewheelControl: true,observeParents: true,slidesOffsetBefore: 324,loopAdditionalSlides: 5,},};},computed: {swiperOptions2() {return Object.assign({}, this.swiperOption, { slidesOffsetBefore: 120 });},bugs1() {return this.bugs.slice(0, Math.round(this.bugs.length / 2));},bugs2() {return this.bugs.slice(Math.round(this.bugs.length / 2),this.bugs.length);},},
};
</script>
<style lang="stylus" scoped>
// @import './swiper.min.css';
@import '../../../../node_modules/swiper/dist/css/swiper.min.css';.cve-wrapper {width: 100%;color: #000;background: linear-gradient(180deg, rgba(243, 248, 252, 0.7) 0%, rgba(243, 248, 252, 0.3) 100%);.pcSwiper {margin-bottom: 80px;}.moblieSwiper {display: none;}>h1 {margin: 60px auto 32px;text-align: center;font-style: normal;font-weight: 500;font-size: 24px;line-height: 36px;color: #333333;}.swiper-wrapper1, .swiper-wrapper2 {.swiper-box {background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 80.73%, rgba(255, 255, 255, 0.85) 100%);backdrop-filter: blur(22.5px);border-radius: 4px;width: 384px !important;height: 200px;.tag-list {display: flex;padding: 12px 16px;padding-bottom: 0;.stag {font-style: normal;font-weight: 500;font-size: 14px;color: #666666;background: #F0F6FE;border-radius: 2px;padding: 5px 8px;margin-right: 8px;}}.desc {font-style: normal;font-weight: 700;font-size: 14px;color: #333333;margin-bottom: 14px;padding-left: 16px;}.ref-list {display: flex;flex-wrap: wrap;padding: 10px 16px;padding-top: 0;.stag {border-left: 1px #eee solid;padding: 0 20px;margin-top: 16px;width: 133px;text-align: center;color: #666666;font-style: normal;font-weight: 400;font-size: 14px;}.stag:nth-of-type(1), .stag:nth-of-type(5) {padding-left: 0;border: unset;text-align: left;}}}}
}@media (max-width: 750px) {.swiper-pagination {left: 40%;padding-top: 24px;.swiper-pagination-bullet {margin-left: 12px;}}.cve-wrapper {padding-bottom: 64px;.pcSwiper {display: none;}>h1 {margin: 28px auto 0;}.moblieSwiper {display: block;padding: 0 20px;.mobileItem {background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 80.73%, rgba(255, 255, 255, 0.85) 100%);backdrop-filter: blur(22.5px);border-radius: 4px;margin-top: 20px;.tag-list {display: flex;padding: 12px 16px;padding-bottom: 0;.stag {font-style: normal;font-weight: 500;font-size: 14px;color: #666666;background: #F0F6FE;border-radius: 2px;padding: 5px 8px;margin-right: 8px;}}.ref-list {display: flex;flex-wrap: wrap;padding: 10px 16px;padding-top: 0;.stag {border-left: 1px #eee solid;padding: 0 20px;margin-top: 16px;width: 120px;text-align: center;color: #666666;font-style: normal;font-weight: 400;font-size: 14px;}.stag:nth-of-type(2n+1) {padding-left: 0;border: unset;text-align: left;}}}}}
}
</style>

yhBug.ts 文件

interface OpensourceDatabaseBug {name: stringreference: string[]
}type OpensourceDatabaseBugs = Array<OpensourceDatabaseBug>const bugs: OpensourceDatabaseBugs = [
{name: 'MySQL 8.0.27',reference: ['CVE-2022-21509','CVE-2022-21526','CVE-2022-21527','CVE-2022-21528','CVE-2022-21529','CVE-2022-21530','CVE-2022-21531','CVE-2022-21438','CVE-2022-21459','BUG 106045','BUG 106047','BUG 106048','BUG 106050','BUG 106051','BUG 106058','BUG 106061','BUG 106055']
},
{name: 'MySQL 8.0.29',reference: ['BUG 108241','BUG 108242','BUG 108243','BUG 108244','BUG 108246','BUG 108247','BUG 108248','BUG 108249','BUG 108251','BUG 108252','BUG 108253','BUG 108254','BUG 108255']
},
{name: 'MariaDB 10.3.35',reference: ['N1DEV-28501','MDEV-28502','MDEV-28503','MDEV-28504','MDEV-28505','MDEV-28506','MDEV-28507','MDEV-28508','MDEV-28509','MDEV-28510','MDEV-28614','MDEV-28615','MDEV-28616','N1DEV-28617','MDEV-28618','MDEV-28619','MDEV-28620','N1DEV-28621','MDEV-28622','MDEV-28623','MDEV-28624']
},
{name: 'MariaDB 10.10.0',reference: ['MDEV-29358','MDEV-29359','MDEV-29360','N1DEV-29361','MDEV-29362','MDEV-29363']
},
{name: 'OceanBase 3.1.4',reference: ['issues 986','issues 987','issues 988','issues 989','issues 995','issues 1000']
}
]export default bugs

demo 我放在github上了，如需要请自取：swiper-vue

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/714267.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

陶瓷工业5G智能制造工厂数字孪生可视化平台，推进行业数字化转型

陶瓷工业5G智能制造工厂数字孪生可视化平台，推进行业数字化转型

陶瓷工业5G智能制造工厂数字孪生可视化平台&#xff0c;推进行业数字化转型。在陶瓷工业领域&#xff0c;5G智能制造工厂数字孪生可视化平台的应用正在改变着行业的传统生产模式&#xff0c;推动着数字化转型的进程。本文将围绕这一主题展开探讨&#xff0c;分析数字孪生可视化…
阅读更多...
Unity GC + C# GC + Lua GC原理

Unity GC + C# GC + Lua GC原理

Unity垃圾回收原理 参考文章&#xff1a;垃圾回收 (计算机科学) - 维基百科&#xff0c;自由的百科全书 (wikipedia.org) 在计算机科学中&#xff0c;垃圾回收&#xff08;英语&#xff1a;Garbage Collection&#xff0c;缩写为GC&#xff09;是指一种自动的存储器管理机制。…
阅读更多...
配置之道：深入研究Netty中的Option选项

配置之道：深入研究Netty中的Option选项

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 配置之道&#xff1a;深入研究Netty中的Option选项 前言Option的基础概念ChannelOption与Bootstrap Option常见的ChannelOption类型ChannelConfig的使用Option的生命周期不同传输协议的Option 前言 在…
阅读更多...
Linux下检查端口占用

Linux下检查端口占用

很多网站都给出方法检查出端口占用的进程&#xff0c;直接就kill掉&#xff0c;并不检查占用进程的详细情况&#xff0c;如&#xff1a;https://www.runoob.com/w3cnote/linux-check-port-usage.html 正常情况下&#xff0c;需要对进程进行检查 ls /proc/进程ID -l
阅读更多...
Tomcat部署Web服务器及基础功能配置

Tomcat部署Web服务器及基础功能配置

前言 Tomcat作为一款网站服务器&#xff0c;目前市面上Java程序使用的比较多&#xff0c;作为运维工人&#xff0c;有必要了解一款如何去运行Java环境的网站服务。 目录 一、Java相关介绍 1. Java历史 2. Java跨平台服务 3. Java实现动态网页功能 3.1 servelt 3.2 jsp …
阅读更多...
Revit-二开之创建TextNote-(1)

Revit-二开之创建TextNote-(1)

Revit二开之创建TextNote TextNode在Revit注释模块中&#xff0c;具体位置如图所示 图中是Revit2018版本 【Revit中的使用】 Revit 中的操作是点击上图中的按钮在平面视图中点击任意放置放置就行&#xff0c; 在属性中可以修改文字 代码实现 创建TextNode ExternalComm…
阅读更多...
Web Tomcat

Web Tomcat

目录 1 前言2 Tomcat的安装3 Tomcat文件的构成4 Tomcat的使用步骤 1 前言 Tomcat是一个 http(web)的容器&#xff0c;笼统的理解一下所有的网站都叫做web。这个web容器可以把我们的前端(htmlcssjs)和后端(servlet)代码都运行起来。 Tomcat是一个免费的开源的Servlet容器&#…
阅读更多...
Flutter中的三棵树

Flutter中的三棵树

Widget Tree&#xff1a; 页面配置信息。 Element Tree&#xff1a; Widget tree的实例化对象&#xff0c;创建出renderObject&#xff0c;并关联到element.renderobject属性上&#xff0c;最后完成RenderObject Tree的创建。 RenderObject Tree&#xff1a;完成布局和图层绘制…
阅读更多...
【C++ 函数重载】

【C++ 函数重载】

C 函数重载 ■ C 函数重载简介■ C 运算符重载■ 一元运算符重载■ 二元运算符重载 &#xff08;&#xff0c;-&#xff0c;*&#xff0c;/&#xff09;■ 关系运算符重载 &#xff08; < 、 > 、 < 、 > 、 等等&#xff09;■ 输入/输出运算符重载&#xff08;运…
阅读更多...
【嵌入式学习】网络编程day03.02

【嵌入式学习】网络编程day03.02

一、项目 1、TCP机械臂测试 #include <myhead.h> #define SER_IP "192.168.126.32" #define SER_PORT 8888 #define CER_IP "192.168.126.42" #define CER_PORT 9891 int main(int argc, const char *argv[]) {int wfd-1;//创建套接字if((wfdsocke…
阅读更多...
ubuntu创建账号和samba共享目录

ubuntu创建账号和samba共享目录

新建用于登录Ubuntu图形界面的用户 sudo su #切换为root用户获取管理员权限用于新建用户 adduser username #新建用户&#xff08;例如用户名为username&#xff09; adduser username sudo #将用户添加到 sudo 组 新建只能用于命令行下登录的用户 sudo su #切换为root用户…
阅读更多...
《TCP/IP详解 卷一》第8章 ICMPv4 和 ICMPv6

《TCP/IP详解 卷一》第8章 ICMPv4 和 ICMPv6

目录 8.1 引言 8.1.1 在IPv4和IPv6中的封装 8.2 ICMP 报文 8.2.1 ICMPv4 报文 8.2.2 ICMPv6 报文 8.2.3 处理ICMP报文 8.3 ICMP差错报文 8.3.1 扩展的ICMP和多部报文 8.3.2 目的不可达和数据包太大 8.3.3 重定向 8.3.4 ICMP 超时 8.3.5 参数问题 8.4 ICMP查询/信息…
阅读更多...
划分开始结束位置设置标记

划分开始结束位置设置标记

划分开始结束位置 初始音轨如下图所示 在想开始地方单击左键&#xff0c;长按直到你想要的结束位置松开。就可以划分开始和结束位置 设置标记 方式1 &#xff1a;直接点击该图标 方式二&#xff1a;使用快捷键M 设置标记点可以自定义名称方便检索标记点
阅读更多...
javaWebssh酒店客房管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

javaWebssh酒店客房管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh酒店客房管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0…
阅读更多...
STL容器之string类

STL容器之string类

文章目录 STL容器之string类1、 什么是STL2、STL的六大组件3、string类3.1、string类介绍3.2、string类的常用接口说明3.2.1、string类对象的常见构造3.2.2、string类对象的容量操作3.2.3、string类对象的访问及遍历操作3.2.4、 string类对象的修改操作3.2.5、 string类非成员函…
阅读更多...
车辆维护和燃油里程跟踪器LubeLogger

车辆维护和燃油里程跟踪器LubeLogger

什么是 LubeLogger &#xff1f; LubeLogger 是一个自托管、开源、基于网络的车辆维护和燃油里程跟踪器。 LubeLogger 比较适合用来跟踪管理您的汽车的维修、保养、加油的历史记录&#xff0c;比用 Excel 强多了 官方提供了在线试用&#xff0c;可以使用用户名 test 和密码 123…
阅读更多...
oracle-long类型转clob类型及clob类型字段的导出导入

oracle-long类型转clob类型及clob类型字段的导出导入

1、若oracle数据库表字段类型有long类型&#xff0c;有时候我们需要模糊匹配long类型字段时&#xff0c;是查询不出来结果的&#xff0c;此时使用TO_LOB&#xff0c;将long类型转成clob类型&#xff0c;就可以模糊匹配信息。 例如&#xff1a;oracle数据库查询所有视图内容中包…
阅读更多...
机器学习-4

机器学习-4

文章目录 前言数组创建切片索引索引遍历切片编程练习 总结 前言 本篇将介绍数据处理 Numpy 库的一些基本使用技巧&#xff0c;主要内容包括 Numpy 数组的创建、切片与索引、基本运算、堆叠等等。 数组创建 在 Python 中创建数组有许多的方法&#xff0c;这里我们使用 Numpy 中…
阅读更多...
机器学习-5

机器学习-5

文章目录 前言Numpy库四则运算编程练习 前言 本片将介绍Numpy库中的四则运算。 Numpy库四则运算 Numpy库可以直接进行一些四则运算&#xff0c;快速的处理两个Numpy数组&#xff1a; a np.array([[1,2,3],[4,5,6]]) b np.array([[4,5,6],[1,2,3]])向量与向量之间 1.加法 …
阅读更多...
14.最长公共前缀

14.最长公共前缀

题目&#xff1a;编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串""。 解题思路&#xff1a;横向扫描&#xff0c;依次遍历每个字符串&#xff0c;更新最长公共前缀。另一种方法是纵向扫描。纵向扫描时&#xff0c;从前…
阅读更多...
最新文章

Copyright @ 2022~2023