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

效果图

相关推荐
笨笨狗吞噬者9 小时前
uni-app 编译小程序原生组件时疑似丢属性,可以给官方提 PR 了
前端·微信小程序·uni-app
Emma_Maria14 小时前
【小程序】project.config.json 和project.private.config.json 区别以及对应字段含义
小程序
CHU72903514 小时前
家政保洁小程序功能架构解析
小程序
计算机徐师兄15 小时前
Java基于SSM的文玩销售小程序【附源码、文档说明】
java·小程序·文玩销售小程序·文玩销售·java文玩销售小程序·文玩销售微信小程序·java文玩销售微信小程序
雨雨雨雨雨别下啦16 小时前
【从0开始学前端】从0搭建uni-app小程序脚手架
小程序·uni-app
AnalogElectronic18 小时前
uniapp学习8,电动车充电小程序
学习·小程序·uni-app
2501_9159214318 小时前
iPhone 定位功能测试时不越狱来修改手机位置的方法
android·ios·智能手机·小程序·uni-app·iphone·webview
TE-茶叶蛋19 小时前
安卓应用(uniapp开发)分享微信-申请appid
android·微信·uni-app
AnalogElectronic19 小时前
uniapp学习9,同时兼容h5和微信小程序的百度地图组件
学习·微信小程序·uni-app
游戏开发爱好者819 小时前
iOS 开发进阶,用 SniffMaster 实现 iPhone 抓包深度分析
android·ios·小程序·https·uni-app·iphone·webview