钉钉小程序固定在底部的按钮组件

林梓阳

已于 2022-08-17 18:21:51 修改

阅读量850

点赞数

分类专栏：小程序文章标签：小程序 javascript 开发语言

于 2022-06-06 14:30:08 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43930421/article/details/125145235

版权

本文介绍了如何在钉钉小程序中实现底部固定的按钮组件，包括圆形和提交样式。通过引用colorUI并创建floatBtn组件，详细说明了实现过程、参数事件及slot的使用，允许用户自定义文字和图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图，一种是固定在右下角的圆形按钮，一种是固定底部的提交按钮。
在这里插入图片描述

实现

首先引入 colorUI，参考：
https://blog.youkuaiyun.com/weixin_43930421/article/details/124748879

在 components 文件目录下新建 floatBtn 组件

floatBtn.axml

<view class="btn-position-{
    {position}}">
      <!--  -->
      <block a:if="{
    {position=='bottom'}}">
            <button class="bg-{
    {color}} round margin-left margin-right" onTap="handleTap">
                  <slot name="text">
                        提 交
                  </slot