1、确保 package.json文件中有  "vue-awesome-swiper": "^3.1.3",没有的话install下

2、在main.js配置

  import VueAwesomeSwiper from 'vue-awesome-swiper'

  import 'swiper/dist/css/swiper.css' //(如果你使用的是2.6.0以上的版本要自己手动去加载css)

  Vue.use(VueAwesomeSwiper)

3、组件中

<div class="swiper-box">
<!-- swiper -->
<swiper :options="swiperOption" ref="swiperUl">
<swiper-slide v-for="(item, index) in dataList" :key="item.id" :class="{current: isIndex == index}">
<a @click="swiperTo(item,index)"><span>{{item.saleCatgName}}</span></a>
</swiper-slide>
</swiper>
</div>

  

computed: {
mySwiper() {
return this.$refs.swiperUl.swiper
}
},
methods:{
       swiperTo(item, index) {
this.mySwiper.slideTo(index - 1, 1000, false);
this.clickedSlide(this.mySwiper, index)
},
clickedSlide(swiper, clickedIndex) {
for (let i = 0; i < swiper.slides.length; i++) {
if (i === clickedIndex) {
swiper.slides[i].className = swiper.slides[i].className.replace(/ current/g, '')
swiper.slides[i].className += ' current'
} else {
swiper.slides[i].className = swiper.slides[i].className.replace(/ current/g, '')
}
}
}
}

  

vue-awesome-swiper 的 使用的更多相关文章

  1. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  2. Vue与swiper想结合封装全屏轮播插件

    项目需求介绍: 1.页面图文混排, 2.点击图片后全屏展示图片,并在底部显示文字,如果没有则不显示 3.关闭全屏后依然停留在上次浏览的位置 4.浏览图片时,不管点击的哪张图片,全屏展示的时候也要显示这 ...

  3. vue 使用swiper的一些问题(页面渲染问题)

    //Swiper上下滚动初始化 swiper_init(){ this.$nextTick(function(){ var mySwiper = new Swiper ('.swiper-contai ...

  4. vue awaresome swiper的使用

    main.jsimport VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'Vue.use(V ...

  5. 小程序和Vue利用swiper实现icons分页显示--动态计算

    这里发现小程序实现步骤,Vue与之类似 先上效果图: <view class="icons"> <swiper indicator-dots="true ...

  6. vue使用swiper模块滑动时报错:[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example becaus

    报错: vue报这个错 [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for ex ...

  7. 轮播模仿臭美APP,vue,swiper

    介绍:轮播使用了swiper,重要用于移动端滑动,详情可查看官网 1.首先用npm安装        npm install swiper 2.main.js 中引入CSS     import 's ...

  8. vue封装swiper

    参考:https://github.com/surmon-china/vue-awesome-swiper npm install vue-awesome-swiper --save 全局引入 imp ...

  9. vue添加swiper的正确方式亲测---切图网

    在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-s ...

  10. Vue整合swiper报错Could not compile template .....swiper\dist\css\swiper.css解决办法

    问题描述 今天做一个前端项目,安装幻灯片插件vue-awesome-swiper后 运行npm run dev 后报错如下: `ERROR Could not compile template E:\ ...

随机推荐

  1. 447. Number of Boomerangs 回力镖数组的数量

    [抄题]: Given n points in the plane that are all pairwise distinct, a "boomerang" is a tuple ...

  2. web 应用中访问 Spring 具体实现

    user=LF password=LF jdbcUrl=jdbc:oracle:thin:@localhost:1521:orcl driverClass=oracle.jdbc.driver.Ora ...

  3. Linux设置串口波特率等参数

    转自 http://blog.csdn.net/zoomdy/article/details/50921336 mingdu.zheng at gmail dot com stty查看串口参数 stt ...

  4. c语言实践 判断一个数是不是素数

    int main() { int input = 0; scanf_s("%d",&input); if (input < 2) { printf("wro ...

  5. Part4_lesson3---U-Boot工作流程分析

    1.程序入口 我们从什么地方去找入口呢,首先是打开顶层目录的makefile文件,在这个文件里面,每一个uboot支持的开发板都有一个配置选项,比如说,搜索smdk2440,结果如下 我们主要关注上图 ...

  6. python核心编程第4章课后题答案(第二版75页)

    4-1Python objects All Python objects have three attributes:type,ID,and value. All are readonly with ...

  7. Zynq 在Ubuntu上搭建编译环境

    http://bbs.elecfans.com/jishu_487981_1_1.html 以下操作均在root用户下完成1,下载交叉编译器在ubuntu里下载arm-2010.09-62-arm-x ...

  8. 设计模式01: Singleton 单例模式(创建型模式)

    Singleton 单例模式(创建型模式) 动机(Motivation)当进行软件开发是会有这样一种需求:在系统中只有存在一个实例才能确保它们的逻辑正确性.以及良好的效率.这应该是类设计者的责任,而不 ...

  9. angular 基本依赖注入

    import { Injectable } from '@angular/core'; @Injectable() export class ProductServiceService { const ...

  10. crm录入成绩modelformset组件

    不基于formset组件的普通写法>> views: class RecordScoreView(View): # 录入成绩 def get(self, request,class_stu ...