一、swiper插件从后台获取数据没问题，css代码也没问题，但是图片不动，应该怎么解决？

实质：vue的生命周期，vue其实是提前 初始化，但是数据还没从后台给我们返回过来。

  • 主要原因是swiper提前初始化，这个时候数据还没有完全出来
  • 解决方式：一个是从vue，一个是从swiper
  • vue中的nectTick()用于解决dom的先后执行问题
    1. <div class="swiper-container">
    2.  <div class="swiper-wrapper">
    3.      <div class="swiper-slide">
    4.         <img src='http://temp.im/640x320'/>//使用它去占位
    5.      </div>
    6.      <div class="swiper-slide">
    7.         <img src='http://temp.im/640x320'/>//使用它去占位
    8.      </div>
    9.      <div class="swiper-slide">
    10.         <img src='http://temp.im/640x320'/>//使用它去占位
    11.      </div>
    12.  </div>
    13. </div>
    1. 在.vue组件中
    2. <script>
    3. import Swiper from 'swiper'
    4. import 'css/swiper.css'
    5. export default{
    6. mounted(){
    7. this.$nextTick(function(){
    8.  var mySwiper = new Swiper('.swiper-container',
    9.   direction: 'vertical', // 垂直切换选项
    10.  loop: true, // 循环模式选项
    11.  autoplay:true,//自动轮播
    12.  observer:true,//解决swiper执行的先后数据，初始化先执行了
    13. });
    14. })
    15. }
    16. }
    17. </script>