持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

前言

掘友们，大家好啊！项目最近一直在加新功能，小编也是爆肝的在搬砖，记录一下今天做的新功能，不算酷炫，但是也是一砖一码的敲出来的。非常的不易，况且是没有UI设计图的！o(╥﹏╥)o！

相信大家在做功能之前，做项目之前，都会拿到UI设计的，或者产品设计的原型图，但是今天在这里，小编并没有原型图可以参考，跟产品和后台对接完后，就凭空想象开始开发。你们可不要说嘲笑小编的审美差哦！

预览效果

了解用户需求

当我接到这个任务功能的时候，对这个功能和需求并不明确。第一份资料就是后台给的开发接口文档，还有就是潦草的用户交互逻辑，如下图。所以，拿到这份文档的时候，我还是对开发任务和需求比较疑惑的。就跟产品讨论了一番，最终定稿也只是在本子上画了草图。产品说：“那我就不设计原型图了”，我笑了，此时的我脑补了一万多种天马行空的设计方案。哈哈哈哈，但是为了为了项目成果，只做了简单的页面。实用就行。

开始开发

动画效果的实现

点击卡片会切换到详情的数据页面，一开始考虑使用element的嵌套Dialog弹框，但是小编觉得太low了，就自己封装了组件，通过transition+绝对定位添加动画控制元素移动，如下图。点击卡片后触发元素移动事件。

showPhoneDetails({ state }, item) { // 添加动画
    var mergePhoneFiltrate = document.getElementsByClassName('mergePhoneFiltrate')[0];
    var mergePhoneCart = document.getElementsByClassName('mergePhoneCart')[0];
    if (item) {
        mergePhoneFiltrate.style.left = '0%'
        mergePhoneCart.style.left = '-100%'
        state.indexType = 2
    } else {
        mergePhoneFiltrate.style.left = '100%'
        mergePhoneCart.style.left = '0%'
        state.indexType = 1
    }
},

此外还有卡片悬浮动画，通过:haver伪类让元素上移，并给卡片添加阴影。

.mergePhoneCart-item:hover {
     transform: translate(0px, -5px);
     box-shadow:0px 0px 7.6px rgba(0, 0, 0, 0.06), 0px 0px 61px rgba(0, 0, 0, 0.13);
}

滚动条样式的封装

下边是滚动条样式的可选项，大家可以根据属性，设置不同的滚动条样式。

/*  滚动条整体部分  */
::-webkit-scrollbar {
}
/* 滚动条里面滑块，能上下左右移动(取决于是垂直还是水平) */
::-webkit-scrollbar-thumb {
}
/* 滚动条的轨道(里面装有thumb) */
::-webkit-scrollbar-track {
}
/* 滚动条轨道两端的按钮，允许通过点击微调小方块的位置 */
::-webkit-scrollbar-button {
}
/* 内层轨道，滚动条中间部分(除去) */
::-webkit-scrollbar-track-piece {
}
/* 边角，及两个滚动条的交汇处  */
::-webkit-scrollbar-corner {
}
/* 两个滚动条的交汇处上用于拖动调整元素大小的小控件 */
::-webkit-resizer{}

总结：

新功能相对于开发来说比较简单，只是增加了一些动画，让用户更有体验感。此外，小编建议大家在做任务，功能之前一定要实现与产品沟通好，了解好功能的用途和用户的需求，争取一次开发成功，避免二次开发。