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. Shell +Cygwinterminal+WinMySQL 传参数授权

    前言:新公司因为部分业务原因有好几百组win机器装MySQL授权登录比较麻烦,简单的写了一个shell传值自动授权的脚本,保存复用. #!/bin/bash #author liding@zlhy.c ...

  2. Yii2中ACF和RBAC

    ACF ( Access Control Filter) ACF ( Access Control Filter)官网的解释就是一个可以在模型或控制器执行行为过滤器,当有用户请求时,ACF将检查acc ...

  3. does not name a type

    一般都与头文件有关 1.缺少using namespaces std: 2.头文件的地方不对. 3.加错了头文件,还会出现内部函数库的报错.有的函数被多个函数库包含

  4. Hyper-V和vmware在虚拟机中安装xen总结

    1. Hyper-V 在hyper-v中安装了ubuntu13.04,运行很好,使用起来的效果感觉比vmware要舒服.安装变异xen的内核也没有问题,可以正常的安装,update-grub之后也可以 ...

  5. portableDFS-可便携的分布式文件系统

    PPT下载(因附件大小有限制,删除了PPT中的隐藏页,如需完整版本,请转到it168文库下载):portableDFS-可便携的分布式文件系统.ppt 完整版本请上这里下载:http://wenku. ...

  6. Java web 中的HttpServletRequest对象

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...

  7. ios7适配--uitableviewcell选中效果

    ios7 UITableViewCell selectionStyle won't go back to blue up vote6down votefavorite 2 Xcode 5.0, iOS ...

  8. wc.exe指令(C++)

    https://github.com/kielingpao/wc 项目相关要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行程序,模仿已有wc.ex ...

  9. Transaction And Lock--快照事务隔离级别

    --================================================--准备数据GOCREATE DATABASE DB5GOUSE DB5GOCREATE TABLE ...

  10. Ajax GET

    $ajax的post请求提交方式: Controller: @RequestMapping("/emps") @ResponseBody public Msg getEmps(@R ...