Vue中简单使用Swiper

最新推荐文章于 2024-07-08 05:06:13 发布

ccor2002

最新推荐文章于 2024-07-08 05:06:13 发布

阅读量2k

点赞数

文章标签： vue swiper

本文链接：https://blog.csdn.net/ccor2002/article/details/90049473

版权

本文介绍了在Vue项目中如何简单封装Swiper组件，解决Vue-Awesome-Swiper存在的问题，包括异步数据渲染导致的尺寸计算错误、swiper-wrapper额外类名设置以及事件处理。通过封装，可以更灵活地控制Swiper实例，并在需要时动态初始化和销毁。

摘要由CSDN通过智能技术生成

Swiper 是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。中文版文档见Swiper中文网
在应用到Vue的工程中时，有 Vue-Awesome-Swiper 可用，但是也发现一些问题，最后自己简单封装一下Swiper绕过。

先看原始版直接在Vue中使用：

<!DOCTYPE html>
<html lang="zh-CN" >
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>swiper demo</title>
    <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

    <style type="text/css">
    html, body {position: relative; height: 100%; font-size: 18px; }
    body {margin: 0; padding: 0; }
    #app{height: 100%;}
    .swiper-container {width: 100%; height: 100%; }
    .swiper-slide { background: #fff; display: flex; justify-content: center; align-items: center; }
    </style>
  </head>

  <body>
    <div id="app">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div v-for="(c, i) in bgColors" class="swiper-slide" :style="{background: c}">Slide {
  {i+1}}</div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data:{
                bgColors: ['Linen', 'Cornsilk', 'FloralWhite', 'LemonChiffon', 'MistyRose']
            },
            mounted: function(){
                this.$nextTick(function(){

最低0.47元/天解锁文章

ccor2002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中简单使用Swiper

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。中文版文档见Swiper中文网在应用到Vue的工程中时，有Vue-Awesome-Swiper可用，但是也发现一些问题，最后自己简单封装一下Swiper绕过。先看原始版直接在Vue中使用：<!DOCTYPE html><html lang="zh-CN" > &lt...
复制链接

扫一扫