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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
Date对象格式化函数代码
Jul 17 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
js表头排序实现方法
Jan 16 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
js实现一个简易计算器
Mar 30 Javascript
小程序实现横向滑动日历效果
Oct 21 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
网络资源
2006/10/09 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
Python导入txt数据到mysql的方法
2015/04/08 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
解决python运行效率不高的问题
2020/07/20 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
研究生个人学年总结
2015/02/14 职场文书
500字小学生检讨书
2015/02/19 职场文书
国庆节新闻稿
2015/07/17 职场文书