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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
javascript  Error 对象 错误处理
May 18 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
js 处理URL实用技巧
Nov 23 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
Node.js实现文件上传
Jul 05 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
基于JavaScript实现控制下拉列表
May 08 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公用函数列表[正则]
2007/02/22 PHP
php csv操作类代码
2009/12/14 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
php获取随机数组列表的方法
2014/11/13 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
JavaScript库 开发规则
2009/01/31 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
理解javascript中的MVC模式
2016/01/28 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
python运行其他程序的实现方法
2017/07/14 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
高中生班主任评语
2014/04/25 职场文书
员工辞职信范文
2015/03/02 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫