一个还算优雅的 react 图片组件

李世赞发布于2019-08-21 17:18 / 1357人阅读

摘要：写了一个还算优雅的图片组件截图前言发现项目中的图片占位模块写得很不优雅，找了一圈，发现没找到自己想要的图片组件。功能简介首先它是一个比较优雅的组件用起来不头疼。类似上面的截图。

写了一个还算优雅的图片组件
mult-transition-image-view

截图：

前言

发现项目中的图片占位模块写得很不优雅，
找了一圈，发现没找到自己想要的图片组件。
于是自己写了一个。

功能简介

首先它是一个比较优雅的组件：用起来不头疼。
第二个它能实现以下场景：

没有图片的时候，显示一个占位图（可以直接用css来写背景，方便自定义）

希望在加载大图的时候，能先占位一张小图，然后再过渡到一张大图。类似上面的截图。

使用方法

安装npm 包

    npm install react-mult-transition-image-view

代码部分

    import ImageBoxView from "react-mult-transition-image-view"

当然你可以设置其他属性

      // 图片路径

小图过渡到大图的效果

      // img 传入数组形式。

实现随机显示图片

当有很多图片的时候，可以让图片随机时间显示，增加图片显示出来的体验
（一起出来真的有点丑）

      // 图片路径

幻灯片效果

因为 img 属性可以传入数组，所以理论上可以加载很多图，实现幻灯片效果。
使用 wait 属性来设置，每张图片加载后的等待时间

      // img 传入数组形式。

样式部分

别忘了样式部分

.c-img-box{
    display:inline-block;
    width: 320px;
    height: 200px;
    background: #f7f6f5;
    position: relative;
    .img-hold{
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        img{
            width:100%;
            height:100%;
        }
        &.img-animate{
            transition: opacity 0.5s;
        }
    }
    
    .img-cover{
        background: url("https://d.2dfire.com/om/images/menulist/7deb58da.default.png") no-repeat center/300px;
        background-color:#f0f0f0;
    }
    
    .img-cover,
    .img-hold,
    .img-hide{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
    }
    
    .img-hide{
        opacity: 0;
    }
    
}

TODO

喜欢的就给个 star

github: https://github.com/qilei0529/react-mult-transition-image-view

GPU云服务器云服务器获取服务器的一个图片 html图片上传组件 jsp 图片上传组件 asp图片无组件上传

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

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

GitHub 值得收藏的前端项目[每月更新...]

摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...

maxmin 2019-08-29 16:07 评论0 收藏0
从 React 到 Reason

摘要：方法里返回的同样是虚拟节点，不同的是节点必须符合要求的节点类型。内采用了模式匹配的形式，定义了对于所有可能的需要如何更新。值得注意的是，组件的是不可变的，而目前中只有一个字段，所以我们没有这样去展开它。 showImg(https://segmentfault.com/img/remote/1460000012656721?w=1024&h=240); 如果你是一个 React 爱好者...

AnthonyHan 2019-08-21 18:33 评论0 收藏0
在React项目中，如何优雅的优化长列表

摘要：合理的优化长列表，可以提升用户体验。这样保证了无论如何滚动，真实渲染出的节点只有可视区内的列表元素。具体效果如下图所示对于比无优化的情况，优化后的虚拟列表渲染速度提升很明显。是基于来实现的，但是是一个维的列表，而不是网状。对于较长的列表，比如1000个数组的数据结构，如果想要同时渲染这1000个数据，生成相应的1000个原生dom，我们知道原生的dom元素是很复杂的，如果长列表...

yearsj 2019-08-23 13:51 评论0 收藏0
在React项目中，如何优雅的优化长列表

摘要：合理的优化长列表，可以提升用户体验。这样保证了无论如何滚动，真实渲染出的节点只有可视区内的列表元素。具体效果如下图所示对于比无优化的情况，优化后的虚拟列表渲染速度提升很明显。是基于来实现的，但是是一个维的列表，而不是网状。对于较长的列表，比如1000个数组的数据结构，如果想要同时渲染这1000个数据，生成相应的1000个原生dom，我们知道原生的dom元素是很复杂的，如果长列表...

Java_oldboy 2019-08-29 17:28 评论0 收藏0