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 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
vue二级路由设置方法
Feb 09 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
design vue 表格开启列排序的操作
Oct 28 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对象类型判断
2008/08/27 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
php数据访问之增删改查操作
2016/05/09 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
JavaScript指定断点操作实例教程
2018/09/18 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python实现图片拼接的代码
2018/07/02 Python
详解Python做一个名片管理系统
2019/03/14 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python sqlite的Row对象操作示例
2019/09/11 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
python爬虫用mongodb的理由
2020/07/28 Python
初中生三年学习生活的自我评价
2013/11/03 职场文书
面试求职的个人自我评价
2013/11/16 职场文书
优秀英语专业毕业生求职信
2013/11/23 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
工商行政处罚决定书
2015/06/24 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis