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

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

一、背景介绍

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

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


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


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

ee58d8c7eaf710a8f6f2dffd25a6436f.jpg


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


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

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

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

👦🏻我说: 真的假的?又想着改变世界了是吧?👻 口说无凭,拉出来遛遛!

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

👦🏻我说: Show Me your Code!🤡


二、效果展示

2.1 传统的样式

(1)小程序开发常用样式库一:uview样式库

2d49a0d2964b4e08b04243b50c8f08fd.png


(2)小程序开发常用样式库二:vantUI样式库

bbb12e8d9a534cb093fef375e3f095aa.png


2.2 高级的样式

(1) 圆形样式

3e86f49939654c6787f01256d9105e14.png


(2)方形样式

0b3d63e5e4764f1ebb8975f8980b8360.png


(3)方形酷黑样式

d8b126fb56bc46cf87c579befc9408d2.png


三、源码解析

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

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

7af8acf09b1d49f3b6019f1f75b3756e.png


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>


相关文章
|
1月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
115 3
|
1月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
|
13天前
|
存储 前端开发 小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
|
1月前
|
开发框架 前端开发 数据安全/隐私保护
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
【4月更文挑战第30天】本文探讨了Flutter的布局和样式设计,关键点包括:1) 布局基础如Column、Row和Stack用于创建复杂结构;2) Container、Center和Expanded等常用组件的作用;3) Theme和Decoration实现全局样式和组件装饰;4) 实战应用如登录界面和列表页面的构建;5) 响应式布局利用MediaQuery和弹性组件适应不同屏幕;6) 性能优化,避免过度复杂设计。了解并掌握这些,有助于开发者创建高效美观的Flutter应用。
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
|
15天前
|
前端开发 小程序
新版校园跑腿外卖独立版+APP+小程序前端外卖配送平台源码
同城校园跑腿外卖配送平台源码,支持自定义diy 你可以设计你的页面,设计你自己的风格,支持多校园,独立版本,多商户,有用户端,骑手端,商家端,强大的功能
34 3
|
1月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
1月前
|
前端开发 开发者 UED
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
【4月更文挑战第30天】本文介绍了在Flutter中管理图标、字体和样式的做法。Flutter提供`Icons`类用于内置矢量图标,支持第三方图标库如FontAwesome。自定义字体可通过添加字体文件至`assets`目录并配置`pubspec.yaml`,然后使用`TextStyle`设置。借助`ThemeData`,开发者能统一管理应用主题样式,局部样式可覆盖全局。通过集中管理样式,提升代码复用性和应用一致性。
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
|
1月前
|
前端开发 UED 开发者
【Flutter前端技术开发专栏】Flutter中的主题与样式主题化
【4月更文挑战第30天】Flutter是一款由谷歌开发的开源移动应用框架,因其高性能和跨平台能力受到开发者青睐。本文聚焦Flutter中的主题与样式主题化,阐述如何通过`ThemeData`定义和设置全局主题,以及如何利用`TextStyle`、`AppBarTheme`和`ButtonTheme`定制文本、AppBar和按钮样式。了解并运用这些知识,能提升应用的统一风格和用户体验,助力Flutter开发。
【Flutter前端技术开发专栏】Flutter中的主题与样式主题化
|
1月前
|
JSON JavaScript 前端开发
前端框架vue的样式操作,以及vue提供的属性功能应用实战
前端框架vue的样式操作,以及vue提供的属性功能应用实战
|
1月前
|
XML 前端开发 JavaScript
前端CSS样式零基础教学总结,UI、前端开发都适用
前端CSS样式零基础教学总结,UI、前端开发都适用