uniapp 小程序 设置按钮固定到页面的最下方

解决方案

我们在做小程序的时候,特别是页面是以列表的形式进行展示,并且页面必须还要新增数据时,这是就会在页面的底部加一个固定的新增按钮,点击新增按钮,弹出一个弹窗...然后进行下一步的业务逻辑操作,那么怎么让这个固定到页面底部呢?

HTML code

javascript 复制代码
<view class="order_add">添加订单</view>

CSS code

css 复制代码
.order_add{
      position: fixed;  /* 固定定位 */
      bottom: 0;        /* 底部对齐 */
      left: 50%;        /* 水平居中 */
      transform: translateX(-50%); /* 向左移动自身宽度的50%来居中对齐 */
      width: 90%;     /* 按钮的宽度,根据需要调整 */
      text-align: center; /* 文本居中 */
      color: white;
      background-color: #007AFF;
      height: 90rpx;
      border-radius: 60rpx;
      line-height: 90rpx;
      font-size: 32rpx;
      letter-spacing: 2rpx;
  }

效果图

相关推荐
大阳光男孩11 小时前
Uniapp+Vue3树形选择器
前端·javascript·uni-app
绝世唐门三哥11 小时前
uniapp系列-uniappp都有哪些生命周期?
vue.js·小程序·uniapp
人还是要有梦想的14 小时前
如何开发小程序介绍
小程序·notepad++
roamingcode16 小时前
支付宝小程序数据可视化避坑指南:@antv/f2 踩坑与最佳实践
信息可视化·小程序·canvas·antv
2501_9159214317 小时前
HTTP和HTTPS协议全面解析:技术原理与安全应用
安全·http·ios·小程序·https·uni-app·iphone
double_eggm1 天前
微信小程序2
微信小程序·小程序
码视野2 天前
课后报名小程序 — 从需求到原型的全栈实践
小程序
打瞌睡的朱尤2 天前
微信小程序1~25
微信小程序·小程序
hnxaoli2 天前
win10小程序(十八)剪切板循环粘贴
python·小程序
河北清兮网络科技2 天前
短剧 APP 产品说明
小程序·uni-app·短剧