标签：事件处理 pagination vue vm Slide swiper css

安装遇到找不到 css的问题，百度查了一些帖子也不行，可能是swiper 升级6.0后的一些变化导致

安装成功的帖子：转载于：https://www.jianshu.com/p/0150d2ee109f

以防丢失，再记录一下：

坑1

以前只需要安装vue-awesome-swiper就够了
现在需要weiper一起安装才行

坑2

按官网教程操作后vue会报错 找不到swiper.css
因为版本不同 项目目录变了 点开node安装文件夹里也只能看到'swiper/swiper-bundle.css'
如果用swiper-bundle.css会有很多问题，比如我遇到的就是分页器不生效
这里就需要降低swiper版本了 我这里使用的是5.4.5

 

最终可用版本

 

 

 

下面代码请放心食用

cnpm install vue-awesome-swiper swiper@5.4.5 --save
// 页面代码
<template>
    <div class="recommendPage">
        <swiper class="swiper" :options="swiperOption">
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
            <swiper-slide>Slide 4</swiper-slide>
            <swiper-slide>Slide 5</swiper-slide>
            <swiper-slide>Slide 6</swiper-slide>
            <swiper-slide>Slide 7</swiper-slide>
            <swiper-slide>Slide 8</swiper-slide>
            <swiper-slide>Slide 9</swiper-slide>
            <swiper-slide>Slide 10</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'

    export default {
        name: 'swiper-example-pagination-dynamic',
        title: 'Pagination / Dynamic bullets',
        components: {
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                swiperOption: {
                    autoplay: {
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        dynamicBullets: true
                    }
                }
            }
        }
    }
</script>
<style scoped >
    .recommendPage .swiper-container{
        position: relative;
        width: 100%;
        height: 200px;
        background: pink;
    }
    .recommendPage .swiper-container .swiper-slide{
        width: 100%;
        line-height: 200px;
        background: yellowgreen;
        color: #000;
        font-size: 16px;
        text-align: center;
    }
</style>

 

 

用了以上代码，一个基本的 swiper轮播实现应该没问题了。

下面说一下点击事件失效的问题：

 

在使用loop模式下 动态循环数据   点击事件不起作用 ，

通过查看api  loop模式下会在slides前后复制若干个slide来实现的，

但是这个复制只是针对 dom 不会带上事件的   所以不能在dom上 直接绑定事件   绑定则无效

 

解决方案：

先声明个全局变量 vm 

 

 

 

在mounted钩子里 让vm = this ，这时vue 实例就指向了 vm 

 

 

下面我们就可以用  vm 来代替this ,找到data中的变量 或者 methods中的方法了

 

 

 

 

标签：事件处理,pagination,vue,vm,Slide,swiper,css
来源： https://www.cnblogs.com/listen9436/p/14960157.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。