Vue项目--公共组件的提取之轮播图

最新推荐文章于 2022-01-28 17:54:53 发布
最新推荐文章于 2022-01-28 17:54:53 发布
阅读量495 收藏 1
点赞数
分类专栏： VUE项目 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36582776/article/details/122225196
版权

由于大轮播图和小轮播的结构样式完全一样，所以可以抽象成一个公共组件。

新建Carousel文件夹，轮播组件放在这里。

需要解决的问题1：小轮播和大轮播的new Swiper创建的位置不同，需要统一

小轮播也可以放在监视属性里，但是由于floorList不会发生改变，所以需要immediate：true（大轮播加上这个也可以，不会影响效果）

所以floorList.vue 中的new Swiper最终写在监视属性里:

 

需要解决的问题2：传数据

需要根据轮播图片信息构建轮播结构（几张轮播图）因此在使用轮播组件时需要传入轮播数据。

大轮播文件ListContainer.vue里：

 

小轮播文件floor.vue:

 

 

 

七彩冰淇淋与藕汤
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue轮播图小组件下载
06-17
使用Vue做的一个轮播图小组件，适用于初学者思维导入，研究学习使用。模拟网站首页轮播图，觉得好用记得好评哦
VueJS轮播图插件Vueslideshow.zip
07-11
基于 VueJS 的轮播图插件 Vueslideshow
基于vue-strap的轮播组件，下载即用
pobu168的博客
06-28 505
基于vue-strap实现的轮播组件，只需改变相应图片路径及图片大小即可完成轮播功能！
Vue轮播组件
qq_30065395的博客
07-03 422
示例代码 <template> <div class="div-body"> <span>故障提醒</span> <!-- autoPlay:是否自动轮播 showIndicator:是否显示轮播的那个点 interval:间隔时间
vue实现的轮播图
12-03
vue实现的一个轮播图示例 创建vue实例，data里面存放轮播图的路径 此插件应用了一些vue的简单的事件绑定，列表循环以及显示隐藏 同时为了使图片轮播交互效果更好，还使用了过渡（vue官网有详细介绍） 可以在标签内设置 enter-active-class 和 leave-active-class来产生轮播平滑的效果 或者可以在css中设置：（设置的transition-group的name="image"）
Vue中使用better-scroll实现轮播图组件
10-15
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue中使用better-scroll实现轮播图组件的实例代码,需要的朋友可以参考下
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
vue-cron表达式组件
vue keep-alive 动态删除组件缓存的例子
10-16
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-carousel:Vue.js的轮播组件
05-26
主要档案 dist/├── vue-carousel.js (UMD, default)├── vue-carousel.min.js (UMD, compressed)├── vue-carousel.esm.js (ECMAScript Module)└── vue-carousel.esm.min.js (ECMAScript Module, ...
vue项目中使用swiper和canvas画轮播海报，海报可下载
清风明月的博客
08-04 827
1、安装swiper： npm install swiper vue-awesome-swiper --save 2、在vue页面引入 import { swiper, swiperSlide } from 'vue-awesome-swiper'; import 'swiper/dist/css/swiper.min.css'; let activeIndex = 0; //定义swiper当前索引值 3、在data里面配置swiper数据 data() { return {
Vue2原先轮播图组件 Carousel组件 slide组件
05-30
Vue2原生始轮播图组件，支持宽度自适应、高度设置、轮播时间设置、左右箭头按钮控制，圆点按钮切换，以及箭头、圆点按钮是否显示。 <v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" :dot="true" :arrow="true"></v-carousel>
VUE项目--抽取公共组件之轮播图
weixin_45609659的博客
01-28 653
Floor与listContainer组件中轮播图功能一样，可以抽取成公共组件 在components文件夹下创建/Carousel/index.vue ListContainer组件中的swiper在watch中，Floor组件中的swiper在mounted中，需要统一，抽取组件需要代码一样 将Floor组件中的swiper放在watch中，但是Floor组件中的数据没有发生变化，watch监听不到———— 使用 immediate: true, //立即监听 watch: { l
vue自定义轮播图组件 swiper
weixin_33887443的博客
01-28 449
1.banner 组件 components/Banner.vue &lt;!-- 轮播图 组件 --&gt; &lt;template&gt; &lt;div class="swiper-container"&gt; &lt;div class="swiper-wrapper"&gt; &lt;div class="swiper-slide" v
Vue学习—Vue写一个图片轮播组件
輕描淡寫的博客
03-14 1573
1、先看效果： 熟悉的图片轮播，只要是个网站，百分之90以上会有个图片轮播。我认为使用图片轮播。 第一可以给人以一种美观的感受，而不会显得网站那么呆板， 第二可以增加显示内容，同样的区域可以显示更多内容。 　2、每学一个新东西 ，图片轮播都是很好的练手案例，而且，也很实用。 3、基本要求：页面加载，自动播放。鼠标悬停，停止播放。鼠标离开，继续播放 　...
vue 2.0 实战 移动音乐app（三）轮播图组件的实现
weixin_42424660的博客
11-13 565
1.slider子组件 和 recommend父组件结构。利用了slot 卡槽。简单点来说，就是子组件预先在相应的位置留了一个坑，父组件引用了子组件以后，把对应的坑填上。 &lt;template&gt; &lt;div class="slider" ref="slider"&gt; &lt;div class="slider-group" ref="sliderGroup&quot
网站的轮播图的获取
CapMiachael的博客
05-29 1038
获取某网站的轮播图
（6）用vue写去哪网——轮播图组件
zyz00000000的博客
11-24 707
1. 用他人的组件，还不如自己有能力写一个轻量级的符合自己项目的轮播图组件，哎，但是js忘了好多，不会写啊，等以后有能力再写。 2. 使用GitHub上最火热的一个轮播图组件：vue-awesome-swiper （1）有npm的下载方式： 我用的是yarn下载的： yarn add vue-awesome-swiper@2.6.7 下载到项目后，在yarn.lock中多了该项： ...
嵌套循环
qmxiu531的专栏
03-10 389
有时候我们在项目中会配到ArrayList嵌套循环。这个时候我们也可以用的双重循环。假设外面的循环变量为floorList(楼盘列表信息)其中楼盘的图片又是一个ArrayList列表floorImgList，这时候就会遇到嵌套循环了解决方法如下：     ${ir1.floorName} ${ir2}（如果floorImgList仍是为HashMap的数值时候${i
VUE项目--轮播图
weixin_45609659的博客
01-28 1929
1. 安装（版本5较稳定） npm install swiper@5 2.1 引入 在需要用到轮播图的组件（ListContainer）中引入swiper import Swiper from 'swiper' 2.2 引入样式 因为其他地方也需要轮播图，也需要swiper的样式，所以在入口文件main.js中统一引入 import 'swiper/css/swiper.css' 3. 初始化swiper实例 3.1 在哪里初始化 ？ 初始化swiper实例之前，页面中的节点（结构）必须完整
vue.js轮播组件vue-awesome-swiper@3.1.3 实现轮播图
最新发布
07-27
引用\[3\]中展示了如何在Vue组件中使用vue-awesome-swiper来实现轮播图。根据您的需求，您想要在切换slide时更换app组件的背景。 为了实现这个需求，您可以在vue-awesome-swiper的slide切换事件中，通过修改app组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值