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;
  }

效果图

相关推荐
求学中--30 分钟前
状态管理一文通:@State、@Prop、@Link、@Provide/Consume全解析
人工智能·小程序·uni-app·wpf·harmonyos
求学中--30 分钟前
ArkUI组件库完全指南:从基础组件到自定义装饰器
低代码·华为·小程序·uni-app·harmonyos
喜欢南方姑娘10 小时前
微信小程序热更新-用户打开小程序时检测版本自动更新
微信小程序·小程序·notepad++
一叶星殇10 小时前
高颜值微信小程序 UI 组件库大盘点,助你轻松开发!
微信小程序·小程序
计算机专业码农一枚10 小时前
微信小程序 uniapp+vue高校社团管理
vue.js·微信小程序·uni-app
晴天sir10 小时前
微信小程序订阅消息推送实战(Java Spring Boot + Redis)
小程序
yzx99101310 小时前
从零开始写一个微信小程序:完整代码实战指南(入门篇)
微信小程序·小程序·notepad++
Можно10 小时前
微信小程序获取用户信息完整流程
微信小程序·小程序
计算机程序定制辅导10 小时前
计算机小程序毕设实战-基于Spring Boot与微信小程序的考研资源共享平台设计与实现基于springboot+微信小程序的考研复习辅助平台【完整源码+LW+部署说明+演示视频,全bao一条龙等】
spring boot·微信小程序·小程序·课程设计
code_li10 小时前
只花了几分钟,用AI开发了一个微信小程序!(附教程)
人工智能·微信小程序·小程序