vue |通過swiper實現動態數據的簡單輪播


做個輪播碰到了不少坑,記錄一下。
這里主要是在html的基礎上用vue實現輪播功能

CDN

首先在lib文件夾上存放會用到的腳本,並在index文件中導入。由於圖片數據是通過接口獲得的,所以我這里使用了axios插件來幫助我獲取數據

<head>
    //Vue相關腳本
    <script src="./lib/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
     //Swiper相關腳本
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">    
    <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
</head>

創建vue實例

    <div id="app" class="main">
    </div>
 new Vue({
    el:'#app',
    data:{
        //存放圖片數據
       picList:[],
    },
 })

功能

這里是單純地實現輪播功能,於是我根據swiper的官方文檔只用了一部分,這里面的.swiper-slide存放的是你想輪播的內容。由於我使用的是動態獲取數據,於是我修改了一下

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

<!-- 修改后 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,i) in picList" :key="i">
            <img :src="item.url">
        </div>
    </div>
</div>

接口獲取數據的方法

methods:{
    getPicList(){
        //如果你需要傳參,可以在url后面加個對象`{}`,具體可以看axios官方文檔
        axios.post('url')
         .then( res=> {
            //這里我過濾了url不為空的對象,使之組合成一個新的數組對象。你可以根據你自己返回的數據進行修改
            this.picList=res.data.Data.filter(item=>{
            return item.url!=="" })     
          }).catch(function (error) {
              console.log('error');
             });
           },
        }

初始化Swiper

//這是官方文檔的寫法
var mySwiper = new Swiper ('.swiper-container', {
  direction: 'vertical', // 垂直切換選項
  loop: true, // 循環模式選項
 }) 
 
 //本實例我選擇用函數包裹寫在methods中,加定時器是解決loop失效的問題。其他的配置屬性建議去swiper的API文檔進行查看
initSwiper(){
  setTimeout(()=>{
  var mySwiper = new Swiper ('.swiper-container', {
  loop: true,
  direction:"horizontal",
  speed:500,
  autoplay :{
       //防止拖拽后無法自動滑動
       disableOnInteraction:false,
       delay:4000
  },
  //防止拖拽后無法自動滑動
  observer:true,
  observeParents:true,
  observeSlideChildren:true,
  })  
  },300)

}

在生命鈎子上調用接口函數和初始化函數

 mounted() {
    this.getPicList()
    this.initSwiper()
},

好啦!剩下的就是添加樣式了,祝你一切順利!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM