swiper的使用和优化

最新推荐文章于 2024-11-01 17:22:42 发布

原创最新推荐文章于 2024-11-01 17:22:42 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swiper的使用和优化

02-Vue.js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了Swiper这一开源、免费且功能强大的触摸滑动插件，详细阐述了其使用方法，包括初始化设置、事件监听等，并探讨了Swiper的性能优化策略，如懒加载、防止滚动冲突等，旨在帮助开发者更好地应用Swiper于项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

swiper

开源、免费、强大的触摸滑动插件

swiper使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <style>
    .swiper-container {
      width: 600px;
      height: 300px;
  }  
  </style>
</head>
<body>
  <div id="app">
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide"
                v-for = " list in lists"
                :key = "list.id"
              >
                {{ list.content }}
              </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
          
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          
          <!-- 如果需要滚动条 -->
          <div class="swiper-scrollbar"></div>
      </div>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      lists: [
        {
          id: 1,
          content: 'A'
        },
        {
          id: 2,
          content: 'B'
        },
        {
          id: 3,
          content: 'C'
        }
      ]
    },
    mounted () {
      //这个钩子中可以拿到真实dom
      this.swiper = new Swiper ('.swiper-container', {
        loop: true, // 循环模式选项
        
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      })        
    }
  })
</script>
</html>

swiper优化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <style>
    .swiper-container {
      width: 600px;
      height: 300px;
  }  
  </style>
</head>
<body>
  <div id="app">
    <input type="text" v-model = "money">
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide"
                v-for = " list in lists"
                :key = "list.id"
              >
                {{ list.content }}
              </div>
              
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
          
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          
          <!-- 如果需要滚动条 -->
          <div class="swiper-scrollbar"></div>
      </div>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      lists: null,
      money: 1000
    },
    created () {
      fetch('./data.json')
        .then( res => res.json())
        .then( data => {
          this.lists = data
          /*
            解决方案3：  【推荐】
              Vue内部提供了一个Vue.nextTick/this.$nextTick(callback)
              nextTick指的是new Vue 渲染dom结束之后才执行回调函数
          */

          this.$nextTick(() => {
             this.swiper = new Swiper ('.swiper-container', {
                loop: true, // 循环模式选项
                
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                },
                
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
                
                // 如果需要滚动条
                scrollbar: {
                  el: '.swiper-scrollbar',
                },
              })    
          })



          // 解决方案2
              // setTimeout(()=> {
              //   this.swiper = new Swiper ('.swiper-container', {
              //     loop: true, // 循环模式选项
                  
              //     // 如果需要分页器
              //     pagination: {
              //       el: '.swiper-pagination',
              //     },
                  
              //     // 如果需要前进后退按钮
              //     navigation: {
              //       nextEl: '.swiper-button-next',
              //       prevEl: '.swiper-button-prev',
              //     },
                  
              //     // 如果需要滚动条
              //     scrollbar: {
              //       el: '.swiper-scrollbar',
              //     },
              //   },0)  
              // })

        })
        .catch( error => {
          if( error ) throw error 
        })
    },
    mounted () {
      //这个钩子中可以拿到真实dom
     
    },
    updated () {
      console.log( '数据发生更新了' )

      // 解决方案1

      if( this.swiper ){
        return false
      }

      // this.swiper = new Swiper ('.swiper-container', {
      //   loop: true, // 循环模式选项
        
      //   // 如果需要分页器
      //   pagination: {
      //     el: '.swiper-pagination',
      //   },
        
      //   // 如果需要前进后退按钮
      //   navigation: {
      //     nextEl: '.swiper-button-next',
      //     prevEl: '.swiper-button-prev',
      //   },
        
      //   // 如果需要滚动条
      //   scrollbar: {
      //     el: '.swiper-scrollbar',
      //   },
      // })        
    }
  })
</script>
</html>