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

效果图

相关推荐
mon_star°2 小时前
消防安全培训小程序项目亮点与功能清单
小程序
自然 醒3 小时前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html
编程迪3 小时前
基于Java和Vue开发的在线问诊系统医疗咨询小程序APP
小程序
CHB4 小时前
uni-agent,你的数字员工来了
人工智能·uni-app·vibecoding
CHU7290354 小时前
知识触手可及:在线教学课堂APP的沉浸式学习体验
前端·学习·小程序
h_jQuery4 小时前
uniapp使用canvas实现逐字书写任意文字内容,后合成一张图片提交
前端·javascript·uni-app
困困的果果头4 小时前
【uniapp】解决H5嵌套在web-view中时打包页面与状态栏重叠
前端·uni-app
前端 贾公子4 小时前
Uniapp 使用 UQRCode 创建二维码
uni-app
Rattenking4 小时前
uni-app组件开发----自定义数字键盘组件
前端·javascript·uni-app
竟未曾年少轻狂4 小时前
微信小程序-组件开发
微信小程序·小程序