vue swiper不滚动解决方法 $nextTick

最新推荐文章于 2024-07-15 18:43:38 发布

妙莲

最新推荐文章于 2024-07-15 18:43:38 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44166439/article/details/113683483

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <style>
    .swiper-container {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="app">
    <Banner />
  </div>
  <template id="banner">
    <!-- 300 * 100 -->
    <div class="swiper-container">
      <!-- 0 * 100  初始化是0 所以滚动不起来-->
      <!-- 数据回来之后 900 * 100 但是swiper要对滚动做计算已经计算成0  所以不能滚动 -->
      <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in imgs">
            <img :src="item" alt="">
          </div>
      </div>
    </div>
  </div>
  </template>
  <script>
    new Vue({
      el: '#app',
      components: {
        'banner': {
          template: '#banner',
          data() {
            return {
              imgs: [],
            }
          },
          methods: {
            innerBaner() {
              var mySwiper = new Swiper ('.swiper-container', {
              direction: 'vertical', // 垂直切换选项
              loop: true, // 循环模式选项
            })
            }
          },
          created() {
            // 图片有  但是不能滚动 异步 生命周期的执行速度要远远快于异步请求 数据还没回来之前 mounted已经执行了
            setTimeout(() => {
              this.imgs = ['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3548528208,4052681942&fm=26&gp=0.jpg',
                'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1478043551,2066032227&fm=26&gp=0.jpg',
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3916800509,2442707343&fm=26&gp=0.jpg']
              // 上一次数据修改引起的dom更新结束后执行回调
              this.$nextTick(()=> {
                this.innerBaner()
              })
            }, 1000)
            
          },
          mounted() {
            /* setTimeout(()=> { // 这不是个解决方案 因为ajax请求的时候不能确定时间
              this.innerBaner()
            },1500) */
          },
          updated() {
            // 这样写的缺点是 如果有别的数据改变了  这个方法每次数据更新都会执行  但是它只需要执行一次
            // this.innerBaner() 
          }
        }
      }
    })
  </script>
  <!-- 
    1.生命周期的速度远远快于网络请求
    2.create 发起网络请求 初始化dom元素的数据为空 紧接着在mounted生命周期里初始化swiper计算的容器层宽度为0 swiper出了滚动不了的原因
    解决方案：初始化swiper让容器宽度不为0
      1.延长触发的执行时间 网络请求时间不固定 不可行
      2.通过修改后的生命周期做初始化 如果有多个数据修改会引起多次初始化
      3.this.$nextTick(()=>{ // 数据改了 dom没有更新完成不会执行
        回调执行的条件是上一次数据修改引起的dom更新结束执行
      })
   -->
</body>
</html>

妙莲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue swiper不滚动解决方法 $nextTick

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.
复制链接

扫一扫