vue组件开发练习--焦点图切换

canopus4u 发布于2019-08-22 11:05 / 2740人阅读

摘要：今天，我就分享一个组件的练手项目焦点图切换组件。这个项目是我用于组件练习的一个项目，当然了，代码也会提交到，有空也会维护。父子组件传参方式，我想大家知道。然后，根据，设置对应点的。

1.前言

vue用了有一段时间了，开发的后台管理系统也趋于完善，现在时间比较算是有点空闲吧！这个空闲时间我在研究vue的另外的一些玩法，比如组件，插件等。今天，我就分享一个组件的练手项目--焦点图切换组件。这个项目是我用于vue组件练习的一个项目，当然了，代码也会提交到github（ec-slider），有空也会维护。我也想我开发的东西好用一点！现在，就是建议有需要的伙伴，可以来玩下这个项目，当练习的作用！另外，如果大家有什么建议，欢迎指点！

建议
 1.下面的步骤，最好在自己本地上跑起来，根据文章的步骤，逐步完成，如果只看代码，很容易懵逼的。 
2.如果不清楚哪个代码有什么作用，可能自己调试下，把代码去掉后，看下有什么影响，就很容易想出代码有什么作用了！

2.项目目录

很普通，很好理解的一个目录，但还是简单的解释一下吧

node_modules:文件依赖模块（自动生成）
dist:打包文件产出目录（自动生成）
src:开发文件目录
src/components:组件文件目录
.babelrc:babel编译es6的配置文件
.gitnore:不提交到git的文件（目录）的配置文件
fontSize:设置rem算法的文件（现在没用到，忽略）
index.html：模板文件
index.js:入口文件
package.json:配置文件
README.md:说明文档
webpack.config.babel.js:webpack配置文件

3.步骤详解 3-1跑起来

这是项目的第一步（项目搭建这个，我不多说，之前的文章已经说了几次了！），现在src/components/ec-slider.vue这里输出一个‘守候’
1.首先，在src/components/ec-slider.vue里面输出‘守候’，代码如下

2.然后，在src/components/index.js里面设置注册组件（要带一个install方法），代码如下

import SlideImg from "./ec-slider.vue"
const ecslide={
    install:function (Vue) {
        Vue.component("ec-slide",SlideImg)
    }
}
export default ecslide;

3.在入口文件，index.js里面引入并且使用组件

require("./index.html");
require("./src/sass/index.scss");
import Vue from "vue"
//引入并且使用组件
import ecslide from "./src/js/components/index";
Vue.use(ecslide);
let app6 = new Vue({
    el: "#app6",
    data: {

    },
    mounted(){
        
    }

});

4.在index.html（模板文件），输出组件

5.命令行输入$ npm run dev跑起来，结果完美！这几步的原理貌似没什么可多说的，都是固定式的步骤。

3-2开发准备

经过上一步之后，基础就已经打好了，那么接下来就是一个开发的过程，大部分都是修改src/components/ec-slider.vue这个文件。
开发之前，大家不要急着写代码，先分析下当中的运行流程！
首先，一个焦点图切换，需要什么参数？根据下面的一个淘宝栗子，我简单分析下，就是下面这几个！

list-图片列表[{src:"url",href:"https://www.baidu.com"},{src:"url",href:"http://www.163.com"}]（src:图片的src，href:跳转连接，点击图片的时候）
autoplay-是否自动播放布尔（默认false）
type-轮播方式‘transparent’（透明度切换）， "slide"（滑动切换）（默认slide）
option-对应切换（默认false，不显示）
time-轮播间隔时间，毫秒（默认4000）
sildetype-过渡效果（默认"ease"慢速开始，然后变快，然后慢速结束的过渡效果,参考：transition-timing-function）
arrowurl-箭头图片链接
arrowsize-箭头尺寸‘width,height’
direction-切换方向"left"（左右） "top"（上下）（默认：左右）

分析完了之后，就知道暂时需要这么多参数，那么接下来就是在ec-slider.vue里面，接收这些参数。父子组件传参方式，我想大家知道--props。代码如下

有地方接收参数，肯定要有地方传参数，就是index.html模板文件里面传

3-3样式布局

既然知道了，会接收什么参数，那下面先把样式布局，给弄好先，这个不多说，代码如下！（有些解释我也是直接打到代码上）

运行结果，就是下面这样

3-4执行动画

布局搞定了，下面就可以写动画，让轮播动起来！这里也需要增加几个变量，一个是nowIndex,记录当前索引。一个是timer定时器！
首先，我用transform:translate3d()这个方式控制ul的滑动。

然后，根据nowIndex，设置对应点的class。

js代码如下

到了这里，剩下的就只有点击两个箭头，执行相应动画，这个就相对简单，无非就是调用switchDo函数，唯一区别在于，点击左边的箭头，是减少模式，右边箭头的增加模式。代码如下，很好理解。

到了这里，对交互有强迫症的开发者就受不了了，到了最后一张，再点击右边箭头，就会出现下面的情况！

到了第一张，再点击左边箭头也是类似的情况，这样就很不好。理想情况是下面这样

3-5细节优化

要想做上面的效果，改的地方会比较多，先说下原理吧，到了最后一张，这个时候，再点击右边箭头，像淘宝那样，回到第一张。到了第一张，再点击左边箭头类似效果回到最后一张。那么最后的布局是这样

这样布局能实现效果，到了最后一张，这个时候，再点击右边箭头，像淘宝那样，回到第一张。就像下面

这个时候，就需要多做一步，滚动到这里的时候，瞬间拉回去。而且这个拉回去，要把ul的过渡效果transition去掉，不然就会看到拉回去的过渡效果！同时要改变nowIndex。

1.首先，ul布局方面

2.然后，对应的点修改

这个可能会有点绕，我解释下，比如滚动最后一张了，再点击右边箭头，向右滑动到第一张的时候，如下图

这个时候又要把第一个点变成蓝色，但是对应点的索引和nowIndex对不上，这个时候用一个技巧。把第一个（.span1）点显示出来，然后把最后一个点隐藏。这样还是用户看到还是看到4个点在屏幕！等动画执行完了，拉回去第一张的时候。把.span1隐藏，正常显示对应的点！这个大家细想一下就知道了。到了第一张，再点击左边箭头类似效果回到最后一张也是相同的处理方式！

到这里，功能就基本完成了，下面给出这部分代码！

3-6其它切换方式

码农怎么会满足于现状，只有一种切换方式，怎么行，所以我又完善了些，1.一个透明度的切换方式。2.当传进的list长度为1的时候只显示图片，不进行任何动画。3.左右滑动事件的处理（不规范处理）！虽然也是很少功能，但是我在日常开发可以满足！
完整代码如下，大家也可以去github上面看代码ec-slider

index.html




    
    
    Title

4.小结

好了，今天的开发就到此为止了。起初这个项目我是打算当练手用的，但是后来在项目上使用了，虽然这个写得比较简单，但是效果还不错。现在情况还不是很好，以后有需要也会维护。目前来说，也是建议大家可以玩下这个项目，虽然文章有点长，但是直接看下，边动手写代码，边看文章，会发现。一下子就看完了！这个应该是不错的练手项目，可以熟悉使用vue开发组件！最后，如果大家觉得有哪里写错了，写得不好，欢迎指点！

-------------------------华丽的分割线--------------------
想了解更多，关注关注我的微信公众号：守候书阁

超融合服务器混合云 js点击焦点图切换 vue组件开发切换焦点焦点切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91755.html

vue插件开发练习--实用弹窗

摘要：前言上回说了组件组件开发练习焦点图切换的一个练习项目，这次换下口味，说下的插件练手的项目。和组件开发的目录相比，区别就在于这个文件夹上。开发过程把项目跑起来首先，先弄这个组件。最后还需要一个变量，控制弹窗是否显示。 1.前言上回说了组件（vue组件开发练习--焦点图切换）的一个练习项目，这次换下口味，说下vue的插件练手的项目。相对于现在之前的焦点图切换的组件，这个可能就更简单了，基...

muzhuyu 2019-08-22 11:06 评论0 收藏0
2017-09-13 前端日报

摘要：前端日报精选中的垃圾收集，图文指南十个免费的前端开发工具专题之递归如何在链中共享变量基于的爬虫框架中文译十六进制颜色揭秘掘金掘金小书基本环境安装小书教程中间件对闭包的一个巧妙使用简书源码分析掘金组件开发练习焦点图切换前端学 2017-09-13 前端日报精选 V8 中的垃圾收集（GC），图文指南十个免费的web前端开发工具JavaScript专题之递归 · Issue #49 · m...

BWrong 2019-08-22 11:05 评论0 收藏0
2018年8月所遇知识点整理

摘要：注本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导一，页面的锚链接定义锚点锚点链接。类似于我们阅读书籍时的目录页码或章回提示。 *注：本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导一，页面的锚链接 1,定义：锚点,锚点链接。常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还...

silenceboy 2019-08-30 11:05 评论0 收藏0
2018年8月所遇知识点整理

摘要：注本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导一，页面的锚链接定义锚点锚点链接。类似于我们阅读书籍时的目录页码或章回提示。 *注：本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导一，页面的锚链接 1,定义：锚点,锚点链接。常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还...

guqiu 2019-08-23 17:57 评论0 收藏0
Vue一个案例引发的动态组件与全局事件绑定总结

摘要：我们需要的最好效果肯定是当前的全局事件就在当前的组件下产生作用，当我们切换到其他组件时，事件自动删除，于是我可能想到的就是利用钩子函数去删除这个全局事件。最近在自学 Vue 也了解了一些基本用法，也记录了一些笔记有兴趣的朋友可以去查看我的其他文章，技术这东西真的不能光靠看，看是没有的，你必须要动手实践，只有在实战项目中才能发现问题，才能发现我们没有掌握的知识点，然后发现问题解决问题，...

MycLambert 2019-08-23 13:03 评论0 收藏0