vue使用原生swiper代码实例


Posted in Javascript onFebruary 05, 2020

这篇文章主要介绍了vue使用原生swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

<template>
  <div>
    <div class="swiper_Box" :class="identify">
      <div class="swiper-wrapper" :ref="identify">
        <div class="swiper-slide" v-for="(item,index) in imgArr" :key="'swiperSlide'+index">
          <div class="bannerItem">
            <img :src="item.url" alt="">
          </div>
        </div>
      </div>
      <!-- <div v-if="imgArr.length>1" class="swiper-button-prev" slot="button-prev"></div>
      <div v-if="imgArr.length>1" class="swiper-button-next" slot="button-next"></div> -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
export default {
  props:['imgArr','identify','paginationType'],//接收传来的轮播图
  watch:{
    imgArr:{
      handler(newVal){
        console.log(newVal)
      },
      immediate:true
    },
    identify:{
      handler(newVal){
        console.log("id:"+newVal)
        var self=this;
      },
      immediate:true 
    }
  },
  data(){
    return{
      swiperShow:false,
      MySwiper:null,//swiper实例
    }
  },
  created(){
  },
  mounted(){
    var self=this;
    self.MySwiper = new Swiper ('.'+self.identify,{
      init: true,
      observer:true,
      observeParents:true,
      slidesPerView: 1,
      spaceBetween: 0,
      keyboard: {
        enabled: true,
      },
      loop: true,
      autoplay: {
        delay: 8000,
        disableOnInteraction: false
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        type:self.paginationType?self.paginationType:'bullets'
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
    });
  }
}
</script>

<style scoped>
@import url("../styles/swiperBullet.css");
/* 轮播图 */
.swiperBox{
  width:100%;
}
.swiper_Box{
  position: relative;
  overflow: hidden;
}
.swiper_Box .bannerItem img{
  height:auto;
  width:100%;
}
.swiperBox .bannerItem{
  width:100%;
  text-align: center;
}
.swiperBox .bannerItem img{
  height:auto;
  width:100%;
}
.swiper-pagination{
  position: absolute;
  bottom:20px;
  left:50%;
  transform: translateX(-50%);
}

</style>

swiper的引入形式是link标签引入样式

script标签引入js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
loading动画特效小结
Jan 22 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
微信小程序实现聊天室
Aug 21 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 #Javascript
JS原型和原型链原理与用法实例详解
Feb 05 #Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 #Javascript
小程序如何写动态标签的实现方法
Feb 05 #Javascript
vue如何实现动态加载脚本
Feb 05 #Javascript
vue实现图片懒加载的方法分析
Feb 05 #Javascript
Vue组件基础用法详解
Feb 05 #Javascript
You might like
php cache类代码(php数据缓存类)
2010/04/15 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
一些常用的Javascript函数
2006/12/22 Javascript
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
Prototype框架详解
2015/11/25 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
Python基于pillow判断图片完整性的方法
2016/09/18 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
大学生表扬信范文
2014/01/09 职场文书
超市中秋节促销方案
2014/03/21 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
导游词之广西漓江
2019/11/02 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL