vue+swiper实现组件化开发的实例代码


Posted in Javascript onOctober 26, 2017

swiper的组件

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt=""></div>
      <!--<div class="swiper-slide" v-for="item in test"><img :src="item.room_src" alt=""></div>-->
    </div>
  </div>
</template>
<script>
 import Swiper from 'swiper'
 export default {
  name: 'swiper',
  data() {
   return {
    mySwiper: null,
//    test: [
//     "https://rpic.douyucdn.cn/acrpic/171024/288016_0921.jpg",
//     "https://rpic.douyucdn.cn/acrpic/171024/748396_0924.jpg",
//     "https://rpic.douyucdn.cn/acrpic/171024/453751_0922.jpg",
//     "https://rpic.douyucdn.cn/acrpic/171024/79663_0920.jpg"
//    ]
   }
  },
  props: ['swiper'], //swiper的就是test这个数据传递来的
  methods: {
   _initSwiper() {
    this.mySwiper = new Swiper('.swiper-container', {
     autoplay: 5000,//可选选项,自动滑动
    })
   },
   _updateSwiper() {
    this.$nextTick(() => {
     this.mySwiper.update(true); //swiper update的方法
    })
   },
   swiperUpdate() {
    if (this.mySwiper) { //节点存在
     this._updateSwiper(); //更新
    } else {
     this._initSwiper(); //创建
    }
   },
  },
  watch: {
   //通过props传来的数据 和 组件一加载节点就创建成功 二者不是同步,实时监听的swiper(传递的值)的变化
   swiper() {
    this.swiperUpdate();
   }
  },
  mounted() {
   this.swiperUpdate(); //页面一加载拉去数据创建节点
  }
 }
</script>
<style lang="scss" scoped>
  .swiper-container {
    width: 100%;
    height: 4rem;
    margin-top: 0.9rem;
    .swiper-wrapper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        background-size: cover;
        width: 100%;
        height: 4rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>

home.vue 调用的组件方法

//html
  <swiper :swiper="roomList.slice(6,10)" ></swiper>
//js
 import swiper from 'components/swiper/swiper'
 components: {
   swiper
  },

问题:如果单纯的调用_initSwiper的方法,会发现页面是不能滚动的,但是页面随便修改东西,然后保存的swiper又可以滚动的,这个个原因是初始swiper的节点没有创建成功,值页面有穿进去的,一层一层的可以打印swiper的值为空的,当修改东西值就能传递进去的,所以的这里的我们需要通过判断节点是否成功来update siwper的方法

Javascript 相关文章推荐
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 #Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 #Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 #Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 #Javascript
webpack3之loader全解析
Oct 26 #Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 #Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 #Javascript
You might like
一个程序下载的管理程序(四)
2006/10/09 PHP
php抓即时股票信息
2006/10/09 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
市级文明单位申报材料
2014/05/07 职场文书
初中教师业务学习材料
2014/05/12 职场文书
校园元旦活动总结
2014/07/09 职场文书
导游词怎么写
2015/02/04 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android