vue+swiper，在轮播图中插入背景图，使其占满整个屏幕失败是为什么？

vue+swiper，怎么在轮播图中插入背景图，使其占满整个屏幕

目前页面出现的问题如图，占满不了整个屏幕

img

代码展示

img

img

建议用F12打开控制台查看元素定位问题，前端查找问题，控制台用处很大。

img

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7535825
  • 这篇博客你也可以参考下：vue中使用swiper插件，轮播图插件
  • 除此之外, 这篇博客: 第一个vue项目中的 12：利用swiper组件写轮播图 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • ①安装swiper ：  cnpm install --save swiper@5

    ②引入 css和js文件和js代码段

    import Swiper from'swiper'

    import "swiper/css/swiper.css"

    js代码段放在mounted里面。

    但是这样做以后会发现没有效果，为什么呢？因为我们遇到了异步的问题

     

     我们期待的顺序时①②③④，因为这样就能正常的渲染数据

     而调试完才发现顺序是①②④③，

    可以看到bannerlist数据还没回来，mounted就挂载完毕了，所以获取不到数据，关键就是dispatch方法，这是一个异步语句，导致v-for遍历的时候结构还不完全，所以我们需要解决这个问题。

     我们需要用watch监听属性和$nextTick来解决这个问题

    官方介绍nextTick：在下次DOM更新 循环结束之后 执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
          当执行了handler方法，代表组件实例身上这个属性的属性更新了，因为一修改数据之后，watch就会检测到，然后使用nextTick方法，获取更新后的 DOM.当你执行这个回调的时候，服务器的数据回来了，v-for执行完毕了，所以轮播图的结构就一定有了。

            <div class="swiper-container" ref="mySwiper">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(carousel, index) in bannerList"
                :key="carousel.id"
              >
                <img :src="carousel.imgUrl" />
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
       </div>



watch: {
    //监听bannerList数据的变化:因为这条数据发生过变化----由空数组变为数组里面有四个元素
    bannerList: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
           //swiper的模板
          var mySwiper = new Swiper(
            this.$refs.mySwiper,
            {
              loop: true, // 循环模式选项
              // 如果需要分页器
              pagination: {
                el: ".swiper-pagination",
                clickable: true,
              },
              // 如果需要前进后退按钮
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
            }
          );
        });
      },
    },
  },

    props传递数据：

    父组件Home传给子组件Floor数据

     子组件接收：  

     floor模块继续使用swiper组件，但是这里却可以直接把js代码放在mounted中， 之前不能放在mounted中是因为在组件内部发送请求，动态渲染，这里的轮播图数据是父组件中传来的，所以可直接放在mounted中，不用使用watch+$nextTick。

    mounted() {
    // 之前不能放在mounted中，因为是在组件内部发送请求，动态渲染的，这里是父组件中传来的数据，所以可以直接放在mounted中，不用使用nextTick
    var mySwiper = new Swiper(this.$refs.cur, {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },