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 class="swiper-wrapper"> <div class="swiper-slide"><img src="../fixtures/sliders/t1.svg"/></div> <div class="swiper-slide"><img src="../fixtures/sliders/t2.svg"/></div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分頁器 --> <div class="swiper-pagination"></div> <!-- 如果需要導航按鈕 --> <!--<div class="swiper-button-prev"></div>--> <!--<div class="swiper-button-next"></div>--> <!-- 如果需要滾動條 --> <!--<div class="swiper-scrollbar"></div>--> </div> </template> <script> import 'swiper/dist/css/swiper.css' import Swiper from 'swiper'; export default { name: "Slider", mounted(){ new Swiper ('.swiper-container', { loop: true, // 如果需要分頁器 pagination: '.swiper-pagination', // 如果需要前進後退按鈕 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滾動條 scrollbar: '.swiper-scrollbar', }) } } </script> <style scoped> .swiper-container { width: 100%; margin: 0; padding: 0; } .swiper-wrapper { height: 200px; } .swiper-slide img { max-width: 100%; } .swiper-slide { text-align: center; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } </style>
執行效果:
接下來,我們對上面的程式碼進行重構,因為如果我們用 css 選擇器作為 Swiper 定位頁面上元素依據的話,假如在一個頁面上同時有兩個.slider-container,那麼這個元件就會亂套 !我們要秉承著低耦合的開發方式來重構我們的程式碼。
我們可以使用Vue提供的更精確的指明方式在元素中新增ref熟悉,然後在程式碼內通過 this.$refs.引用名來引用。
這是Vue.js2.0後的編號,ref標記是標準的HTML屬性,它取代了Vue.js 1.x中v-ref的寫法
我這裡將靜態資原始檔轉移到了static目錄下面。
重構後的程式碼如下:
<template> <div> <div class="swiper-container" ref="slider"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="slide in slides"> <router-link :to="{name:'BookDetail',params:{id:slide.id}}"> <img :src="slide.img_url"/> </router-link> </div> </div> </div> </div> </template> <script> import 'swiper/dist/css/swiper.css' import Swiper from 'swiper' export default { name: "Slider", data(){ return{ slides:[{id:1,img_url:'./static/sliders/t1.svg'},{id:2,img_url:'./static/sliders/t2.svg'}] } }, mounted(){ new Swiper (this.$refs.slider, { loop: true, // 如果需要分頁器 pagination: '.swiper-pagination', // 如果需要前進後退按鈕 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滾動條 scrollbar: '.swiper-scrollbar', }) } } </script>
這裡還沒有把元件完全獨立,裡面有資料定義,其實可以把這個資料作為一個引數傳遞進來,也就是元件之間資料傳遞。
Vue頁面跳轉傳參
通過路由傳參,在router/index.js中定義路由
export default new Router({ routes: [ { name:'BookDetail', path:'/books/:id', component: BookDetail } ] })
前面的輪播元件中已經定義了需要傳遞的路由引數
<router-link :to="{name:'BookDetail',params:{id:slide.id}}"> <img :src="slide.img_url"/> </router-link>
引數接收介面BookDetail.vue
<template> <div> 點選的是:<span v-text="id"></span> </div> </template> <script> export default { name: "BookDetail", data(){ return{ id:this.$route.params.id } }, props:[] } </script> <style scoped> </style>
如果傳遞引數太多,這樣的方式肯定不方便,那麼可以採用vuex,或者元件資料傳遞。
之後每次執行:hs即可。
相關推薦
vue中引用swiper輪播外掛
有時候我們需要在vue中使用輪播元件,如果是在vue元件中引入第三方元件的話,最好通過npm安裝,從而進行統一安裝包管理。 申明:本文所使用的是vue.2x版本。 通過npm安裝外掛: npm install swiper --save-dev 在需要使用swiper的元件裡引入swiper
vue中引用swiper輪播插件
fault 打包 efault uil 安裝 prop pos web 需要 有時候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過npm安裝,從而進行統一安裝包管理。 申明:本文所使用的是vue.2x版本。 通過npm安裝插件:
vue中插入swiper輪播外掛
建立vue專案流程這裡就不用廢話了吧?還不知道就在我前幾篇中有寫。今天我們的大屏專案中有了一個新的需求,資料模組的切換,毫無疑問,swiper外掛不二之選。原生的寫法官網直接給了,那麼這裡介紹一下在vue中使用swiper外掛的方法。<link rel="stylesh
Vue專案中vue-awesome-swiper輪播外掛使用例項:
源自開源專案:http://github.crmeb.net/u/blue 1,引入外掛 import { swiper, s
在同一個頁面中多次使用swiper 輪播外掛,要避免相互影響
在專案中使用輪播是很常見的,swiper 就是其中之一,pc 端,移動端都可以使用,效果還是不錯的;曾經在寫一個頁面的時候,其中有兩個輪播圖,於是都用swiper 來寫了,寫完之後發現顯示的效果不是預期的效果,有很大的問題;後來檢查發現兩個輪播圖相互影響了,樣式啥的衝突了,因
Vue元件(一)——Swiper輪播元件
Vue輪播元件,詳情參見: awesome-swiper vue專案中安裝awsome-swiper元件: npm install [email protected] --save&
vue中如何寫輪播圖
步驟: 1. 安裝vue-awesome-swiper npm install vue-awesome-swiper -S 2.在vue專案中引用vue-awesome-swiper main.js import VueAwesomeSwi
vue中實現簡單輪播效果
html:<div class="cate-main"> <div class="carousel-contain"> <--圖片部分--> <ul class="carousel-wrap transition"&
使用swiper 輪播外掛ajax 請求載入圖片時,無法滑動
因為banner圖是動態建立的,在外掛開始初始化時,文件流中沒用圖片,故沒有建立相應寬度,通過調整js載入順序,問題還是沒有解決。最後找到swiper外掛 api 有屬性是可以根據內容變動,自動初始化外掛的,新增observer:true後問題解決! var mySw
vue 元件封裝 swiper輪播圖
第一步安裝:npm install vue-awesome-swiper --save 第二部在main.js裡引入: import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' impo
swiper在vue專案中loop迴圈輪播失效
版權宣告:本文為博主原創文章,轉載請註明來源。 https://blog.csdn.net/dclnet/article/details/80951884 長話短說,在vue(2.5.x)中使用swiper(4.3.3),輪播加了autoplay和loop、observer
vue中v-for迴圈載入問題導致vue-awesome-swiper輪播失效問題
<swiper v-if="bannerList.length>0" :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide v-fo
vue文字輪播外掛
目前看到有用的外掛就會保留,不為別的,就是想以後遇到同樣的問題能及時高效的解決,前兩天分享了app專案中的文字輪播。今天搞下vue中的吧,以便後用。 1、安裝這個外掛 npm i vue-seamless-scroll --save &nbs
解決swiper4在vue專案中loop迴圈輪播失效
在vue(2.5.x)中使用swiper(4.3.3),輪播加了autoplay和loop、observer、observeParents等引數還是很詭異的無法迴圈輪播; 那麼可以這樣寫程式碼試試: <template> <div class="swiper-conta
swiper (輪播圖) 外掛的使用
<link rel="stylesheet" href="./swiper-4.4.1/dist/css/swiper.min.css"> <script src="./swiper-4.4.1/dist/js/swiper.min.j
swiper圖片輪播外掛
一、swiper簡介 實現圖片輪播的幻燈片的效果的外掛有很多,如touchsiler,Swiper,silerbox等等,各有獨自的API和自定義效果。下面要說的是關於swiper的使用。 Swiper 是一款免費以及輕量級的移動裝置觸控滑塊的js框架,使用硬
解決vue中使用swiper外掛——李帥醒部落格
解決vue中使用swiper外掛,在引入swiper外掛後,發現無法正常執行 這次我們模擬從後臺取下資料,然後資料繫結在swiper標籤中。 <template> <div class="home_page"> <m-
vue一個元件引入多個swiper輪播可能引發的分頁器數量異常問題
index.vue 引用slider.vue(初始化swiper例項的元件)兩次的時候: 1. swiper版本 "swiper": "^3.4.2", 2. 在一個頁面中使用兩個swiper例項時,一個輪播,一個區域性滾動,有時會出現輪播圖分頁器數量異
vue-awesome-swiper輪播圖實踐
最近有個專案需求是做一個輪播圖,圖片不是鋪滿全屏,兩邊空白展示一點上下張圖片的內容,具體如下圖所示: 選擇vue-awesome-swiper外掛的原因是,他就是根據swiper外掛改寫而來的,功能齊全,模式多種。而我又剛好在swiper
自己寫的vue無限輪播外掛
new Vue({ el:'#app', data:{ originalData:{ img_width:350, img_heig