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 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
vue.js的提示组件
Mar 02 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计算整个mysql数据库大小的方法
2015/06/19 PHP
Java中final关键字详解
2015/08/10 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
javascript document.images实例
2008/05/27 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
python中协程实现TCP连接的实例分析
2018/10/14 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Python单元和文档测试实例详解
2019/04/11 Python
python 整数越界问题详解
2019/06/27 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
作风转变心得体会
2014/09/02 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
社区敬老月活动总结
2015/05/07 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
小学英语教学反思范文
2016/02/15 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL