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.pswp.cn/news/714267.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/714267.shtml
英文地址，請注明出處：http://en.pswp.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