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

效果图

相关推荐
说私域2 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序源码的去中心化商业扩散研究
人工智能·小程序·开源·去中心化·零售
繁依Fanyi3 小时前
用 UniApp 构建习惯打卡 App —— HabitLoop 开发记
javascript·uni-app·codebuddy首席试玩官
三天不学习3 小时前
Uniapp 与 Uniapp X 对比:新手上手指南及迁移到 Uniapp X 的注意事项
uni-app·uniapp x
不爱吃饭爱吃菜5 小时前
uniapp微信小程序一键授权登录
前端·javascript·vue.js·微信小程序·uni-app
明耀5 小时前
WPF C# 用WebView加载H5页面(uniapp项目,vue项目)
uni-app·c#·wpf
mon_star°12 小时前
微信答题小程序支持latex公式显示解决方案
微信·小程序
timeguys15 小时前
【前端】[vue3] [uni-app]使用 vantUI 框架
前端·uni-app
Aiden Targaryen17 小时前
Windows/MacOS WebStorm/IDEA 中开发 Uni-App 配置
java·uni-app·webstorm
想要飞翔的pig18 小时前
uniapp+vue3页面滚动加载数据
前端·vue.js·uni-app
会功夫的李白19 小时前
uniapp自动构建pages.json的vite插件
前端·uni-app·vite