Vue中如何實(shí)現(xiàn)輪播圖的示例代碼
這個(gè)功能我感覺在任何項(xiàng)目中都會(huì)涉及到,今天我就把我的實(shí)現(xiàn)方法跟大家分享一下,有不對(duì)的地方還請(qǐng)指出,我好更新。
下面是整體代碼,我把輪播圖單獨(dú)做了一個(gè)組件,大家可以拿來就用,具體代碼如下:
<template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"> <!-- map是數(shù)組 這里我們用v-for把數(shù)據(jù)循環(huán)出來 --> <swiper-slide v-for="item in map"> <a :href="item.i_route" rel="external nofollow" target="_blank"></a> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> <!-- focus end --> </div> </div> </template> <script> //下面我們引用兩個(gè)插件,當(dāng)然,在使用之前請(qǐng)先安裝 //安裝方法:npm install vue-awesome-swiper --save import VueAwesomeSwiper from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { data() { return { swiperOption: { autoplay: 5000, initialSlide: 1, loop: true, pagination: '.swiper-pagination', paginationClickable: true, onSlideChangeEnd: swiper => { //console.log('onSlideChangeEnd', swiper.realIndex) } } } }, mounted () { this.bannerInfo(); }, components: { swiper, swiperSlide }, methods: { //輪播圖初始化 bannerInfo() { //通過接口獲取圖片數(shù)據(jù) this.$fetch('get/image/list').then(res => { if(res.errCode == 200) { this.map = res.errData; } }); } } } </script>
以上就是實(shí)現(xiàn)輪播圖的全部代碼,有興趣的朋友可以試試看啦,希望大家繼續(xù)關(guān)注我們的網(wǎng)站!想要學(xué)習(xí)VUE的可以繼續(xù)關(guān)注本站。
- vue實(shí)現(xiàn)文字橫向無縫走馬燈組件效果的實(shí)例代碼
- vue實(shí)現(xiàn)圖片滾動(dòng)的示例代碼(類似走馬燈效果)
- vue.js整合mint-ui里的輪播圖實(shí)例代碼
- vue.js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
- vue輪播圖插件vue-awesome-swiper的使用代碼實(shí)例
- Vue 過渡實(shí)現(xiàn)輪播圖效果
- 基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
- Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖自動(dòng)播放功能
- vue2實(shí)現(xiàn)可復(fù)用的輪播圖carousel組件詳解
- Vue.js輪播圖走馬燈代碼實(shí)例(全)
相關(guān)文章
Vite配置優(yōu)雅的code?spliiting代碼分割詳解
這篇文章主要為大家介紹了Vite配置優(yōu)雅的code?spliiting代碼分割詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08vue實(shí)現(xiàn)Excel文件的上傳與下載功能的兩種方式
這篇文章主要介紹了vue實(shí)現(xiàn)Excel文件的上傳與下載功能,本文通過兩種方式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06Vue3中關(guān)于路由規(guī)則的props配置方式
這篇文章主要介紹了Vue3中關(guān)于路由規(guī)則的props配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue或react項(xiàng)目生產(chǎn)環(huán)境去掉console.log的操作
這篇文章主要介紹了vue或react項(xiàng)目生產(chǎn)環(huán)境去掉console.log的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09關(guān)于json-bigint處理大數(shù)字問題
這篇文章主要介紹了關(guān)于json-bigint處理大數(shù)字問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05Vue使用mind-map實(shí)現(xiàn)在線思維導(dǎo)圖
Vue中的Mind-Map通常是指使用Vue.js這個(gè)前端框架構(gòu)建的思維導(dǎo)圖組件或庫,它可以幫助開發(fā)者在Web應(yīng)用中創(chuàng)建動(dòng)態(tài)、交互式的思維導(dǎo)圖,讓用戶可以直觀地組織信息和結(jié)構(gòu)化數(shù)據(jù),本文介紹了Vue使用mind-map實(shí)現(xiàn)在線思維導(dǎo)圖,需要的朋友可以參考下2024-07-07vue移動(dòng)端輕量級(jí)的輪播組件實(shí)現(xiàn)代碼
這篇文章主要介紹了vue移動(dòng)端輕量級(jí)的輪播組件實(shí)現(xiàn)代碼,一個(gè)簡(jiǎn)單的移動(dòng)端卡片滑動(dòng)輪播組件,適用于Vue2.x。本文給大家?guī)砹藢?shí)例代碼,需要的朋友參考下吧2018-07-07