你真的会做小程序按钮吗？看了字节35K前端的样式设计，悟了

2022-11-24 159

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 你真的会做小程序按钮吗？看了字节35K前端的样式设计，悟了

一、背景介绍

近来公司业务比较忙，这两天又正好是周末，本来想好好打场球然后好好搓一顿再睡个天昏地暗的。然后突然发现这两天是一年一度的1024程序员日，忽然发觉这已经是第五个告别学生生涯，用代码改变世界的纪念日了。不仅让我想起了当年一起泡实验室、熬通宵憋论文的刘二狗了。

请允许我附一下刘二狗的经典表情。对的，他在每次看代码时总是瞪着铜铃般的双眼，仿佛觉得只要眼睛瞪得够大程序就会没有bug！

也可能正是因为他这一双对bug充满力量的眼睛，他选择了前端，我走上了大数据。在毕业那段时间offer收割到手软，经常跟我凡尔赛说要带我改变世界。

刚好在蹭着这个程序员节日，我对这个二狗子进行了骚扰。好家伙，现在都是字节的高级前端了，都到这份上了，这不得好好的跟人家学两招，看看所谓的前端开发工程师跟高级前端开发到底有啥水分，也替张一鸣老板验验货😘😘

然后，我们就时下火热的小程序技术展开了讨论。

🧑🏽二狗说：还记得曾经那些让我们引以为傲的炫酷样式吗？

👦🏻我说：那不都是调调包？拿来主义而已，小事！怎么回事，我们这牛逼的字节跳动前端工程师，搞了这么多年，调包都不会了？😜

🧑🏽二狗说：老子以前是调包侠，现在是造物主！😁说不定你们公司现在用的样式库都是我在那个夜黑风高的夜晚憋出来的呢！

👦🏻我说：真的假的？又想着改变世界了是吧？👻 口说无凭，拉出来遛遛！

🧑🏽二狗说：哈哈，我这卡姿兰带大眼睛啥时候吹牛打草稿过？😂 就比方说，现在做移动端方向的小程序开发来说，你现在用的样式库，其实有很多设计很粗糙，那就拿页面中的一个按钮来说吧，每一个经得起推敲和耐看的细节才是我们前端永远追求的神。

👦🏻我说： Show Me your Code！🤡

二、效果展示

2.1 传统的样式

（1）小程序开发常用样式库一：uview样式库

uview样式库

（2）小程序开发常用样式库二：vantUI样式库

vantUI样式库

2.2 高级的样式

(1) 圆形样式

（2）方形样式

（3）方形酷黑样式

三、源码解析

二狗的样式着实让我眼前一亮，在我的软磨硬泡之下，他乖乖的交出了源码，让我们一起学习一下，顺便祝大家1024快乐！

那我们就拿其中的一个样式仔细分析分析：

3.1 元素设计

      .btn {
        display: flex;
        justify-content: center;
        align-items: center;    // 这三行保证按钮中图标图片的样式居中
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background: #373d44;
        box-shadow: 5px 5px 10px #16181b, -5px -5px 10px #58626d; // 添加高级感的背景阴影
        image {  // 固定图标大小
          width: 50rpx;
          height: 50rpx;
        }
      }

3.2 完整代码示例

<template>
  <view>
    <view class="row">
      <view class="cell" v-for="(item,index) in img" :key="index">
        <view class="btn">
          <image :src="item"></image>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        img: ["https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/a1.png",
          "https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/b1.png",
          "https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/d1.png",
          "https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/c-z-2.png",
          "https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/c-c-2.png",
          "https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/c-w-2.png",
          "https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/a1.png",
            "https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/b1.png",
            "https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/d1.png",
        ]
      }
    }
  }
</script>
<style lang="scss">
  page {
    background-color: #3d444c;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 30%;
      height: 300rpx;
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background: #373d44;
        box-shadow: 5px 5px 10px #16181b,
          -5px -5px 10px #58626d;
        image {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }
</style>