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的方法
本文向大家介绍Vue-router 类似Vuex实现组件化开发的示例,包括了Vue-router 类似Vuex实现组件化开发的示例的使用技巧和注意事项,需要的朋友参考一下 本文介绍了Vue-router 类似Vuex实现组件化开发的示例,分享给大家,具体如下: 随着项目越来越大,把所有route写在一个文件里就显得杂乱。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程
本文向大家介绍vue.js开发实现全局调用的MessageBox组件实例代码,包括了vue.js开发实现全局调用的MessageBox组件实例代码的使用技巧和注意事项,需要的朋友参考一下 前言 一开始接触到vue中的组件的时候,对于组件的理解还是不够充分的,最近在开发个人博客项目中,一开始就没准备使用一些现在比较流行的UI库(毕竟是个人项目,多练练手还是好的),所以需要自己开发几个全局组件,这里以
本文向大家介绍基于vue实现swipe轮播组件实例代码,包括了基于vue实现swipe轮播组件实例代码的使用技巧和注意事项,需要的朋友参考一下 项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper。 但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个110k的大插件,就大材小用了。再安利一下,swiper2.x和swiper3.x对移动和
本文向大家介绍Vue拖拽组件开发实例详解,包括了Vue拖拽组件开发实例详解的使用技巧和注意事项,需要的朋友参考一下 为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一。我们的项目不需要兼容低版本浏览器。项目本身也是一个数据驱动型的。加之,Vue本身具有以下主要特性: •使用虚拟DOM; •轻量级框架; •高效的数据绑定; •灵活的组件系统; •完整的开发生态链。 这就
本文向大家介绍Vue组件化开发之通用型弹出框的实现,包括了Vue组件化开发之通用型弹出框的实现的使用技巧和注意事项,需要的朋友参考一下 本文主要分享关于组件化开发的理解,让刚入门的小伙伴少走一些弯路,提高开发效率,作者本人也是新手,如有不当之处,请大佬指出,感谢。 相信很多刚入门的小伙伴,经常会写很多重复的代码,而这些代码一般情况下也都是大同小异,在这种情况下,如何让开发和学习变得更加高效,组件化
本文向大家介绍vue实现防抖的实例代码,包括了vue实现防抖的实例代码的使用技巧和注意事项,需要的朋友参考一下 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据。 vue实现防抖方法如下: 1.首先新建一个debounce.js代码如下 2.在需要防抖的vue文件中引入debou
本文向大家介绍开发Vue树形组件的示例代码,包括了开发Vue树形组件的示例代码的使用技巧和注意事项,需要的朋友参考一下 本文介绍了Vue树形组件的示例代码,分享给大家,具体如下: 使用SemanticUI和vue做一个menubar组件,实现方法大概是这样的: 使用时,假如父组件app使用到了menubar组件,那么data中需要定义一下items数据,例 : 里面的click事件是定义了,当在工
本文向大家介绍vue slots 组件的组合/分发实例,包括了vue slots 组件的组合/分发实例的使用技巧和注意事项,需要的朋友参考一下 使用slots 分发内容 使用组件时常常会有组件组合使用的情况,如下: 直接套用组件的话,父级组件会将子级组件覆盖掉,不能实现需求的效果,为了实现该效果就需要使用 slots来内容分发 slots的使用方法如下: <app></app>标签没有引入其他组件