vue2实现可复用的轮播图carousel组件详解
本文实例为大家分享了vue2实现轮播图carousel组件的使用方法,供大家参考,具体内容如下
1、千年老规矩,上效果图,说明功能:
(1) 实现定时器,鼠标未移上图片时,自动轮播切换
(2) 有左右切换按钮,可切换至上一张、下一张
(3)有底部小图标,可自由切换至任意一张
github参考地址:https://github.com/chuanzaizai/vue_carousel
2、组件设计思路:
(1)由于是可复用的子组件,图片的宽高、定时器间隔时间、轮播图list应由父组件传入
(2)定义子组件自身变量,由于我这里为了简化步骤,所以轮播图list就暂时就定义为一个常量
同时定义了pos默认展示的图片数组下标,后面的计算属性会很有用
定时器变量
(3) 接着是比较关键的一些步骤:
a、为图片绑定的:src的计算属性
b、底部的小按钮应该动态生成,并且它的active样式应该依托于pos动态切换
c、上一张、下一张、定时器切换时就是++或者--pos,同时在两个临界值0和defaultList.length-1是判断就可以
d、由于下部小图标为动态生成、宽高不定,但是都应水平居中:
可采用flex布局,或者js调整样式
3、说明一下这样设计的原因
(1)子组件的复用性不言而喻,可定义宽高、定时器切换时间
(2)比较重要的一点:
a、组件加载过程中,如果轮播图数量过多,假如有10张,按照传统加载模式,就初始化一次性加载,再自行切换,这对页面的性能是很大的挑战
b、在以上组件的设计中,用为将pos定义为0,初始化只会加载一张图片,定时器切换或者用户手动切换才会其余图片,这对用户体验是很大的改善
4、代码已上传至github,喜欢的小伙伴可以点个赞!!!!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue轮播图插件vue-awesome-swiper的使用代码实例
最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤: 第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesom
-
基于vue.js轮播组件vue-awesome-swiper实现轮播图
一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u
-
vue.js实现简单轮播图效果
学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&
-
vue利用better-scroll实现轮播图与页面滚动详解
前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码
-
vue轮播图插件vue-awesome-swiper
Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR. 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var
-
Vue中如何实现轮播图的示例代码
这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"
-
基于vue2.0实现简单轮播图
因为之前一直在忙公司的项目,vue这块就生疏了不少,正好借这个小demo复习下vue的知识. 先来个效果图: 如图所示,实现的就是一个间隔2.5s自动向左切换下一张的轮播图,同时鼠标移入停止轮播,移出回复轮播: 而下方按钮会根据当前图片自动变红且可以手动控制当前图片. 思路: 整个demo分为轮播图片和控制span两个部分. 按照前端工程化的需求来说,这两个部分应该解耦成两个component最后再导入页面比较合理,但由于demo较为简单, 作为练手就不搞那么复杂了,对项目有追求[强迫症]的童鞋
-
基于vue.js实现图片轮播效果
轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$
-
VUE开发一个图片轮播的组件示例代码
本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考.希望此文章对各位有所帮助. 完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden"> <div class="slide
-
Vue 过渡实现轮播图效果
Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过渡 下面例子中我们用到列表过渡,可以先学习一下官方的例子 要同时渲染整个列表,比如使用 v-for,我们需要用到 <transition-group> 组件 Vue 轮播图 我们先看这样一个列表 <ul> <li v-for="list in slideList"> <i
随机推荐
- 详解使用React全家桶搭建一个后台管理系统
- MySql修改数据库编码为UTF8避免造成乱码问题
- 浅谈react前后端同构渲染
- cmd dir结构树显示代码(列出目录文件)
- 浅析XMLHttpRequest的缓存问题
- ASP.NET记住登陆用户名的具体实现
- PHP实现的一致性哈希算法完整实例
- Yii2创建控制器(createController)方法详解
- windows下的WAMP环境搭建图文教程(推荐)
- <b>浅谈 ASP 模板技术之参数传递</b>
- JavaScript基础知识学习笔记
- PHP实现的DES加密解密实例代码
- ubbcode函数
- jQuery获得字体颜色16位码的方法
- Easyui笔记2:实现datagrid多行删除的示例代码
- Node.js刷新session过期时间的实现方法推荐
- Android ViewPager实现左右滑动的实例
- Java API方式调用Kafka各种协议的方法
- Android Studio 3.0 Gradle 配置变更
- 详解Spring关于@Resource注入为null解决办法