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 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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多线程类及用法实例
2014/12/03 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Python获取当前路径实现代码
2017/05/08 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
numpy返回array中元素的index方法
2018/06/27 Python
python 二维数组90度旋转的方法
2019/01/28 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
浅析python标准库中的glob
2020/03/13 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
工作失误检讨书范文大全
2014/01/13 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
单位委托书怎么写
2014/09/21 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
2015感人爱情寄语
2015/02/26 职场文书
个人年终总结范文
2015/03/09 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Python实现仓库管理系统
2022/05/30 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers