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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
pytorch 常用线性函数详解
2020/01/15 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
eBay德国站:eBay.de
2017/09/14 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
酒店总经理工作职责
2013/12/13 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
任命书格式
2014/06/05 职场文书
2015年测量员工作总结
2015/05/23 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
党支部培养考察意见
2015/06/02 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android