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

news2024/11/26 0:53:14

解决方案

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

HTML code

<view class="order_add">添加订单</view>

CSS code

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

效果图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2063394.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Answer use of function tool by OpenAI assistant in Python

题意&#xff1a;“在 Python 中使用 OpenAI 助手的函数工具的用途” 问题背景&#xff1a; I am trying to answer to OpenAI assistants function tool. “我正在尝试回答 OpenAI 助手的函数工具。” See my code below. The custom function is called "funnyfunc&qu…

系统编程 网络 基于tcp协议

tcp的客户端&#xff1a; socket&#xff08;&#xff09;&#xff1b;用来开链接的端口 bind&#xff08;&#xff09;&#xff1b;绑定作用&#xff08;在客户端可选可不选&#xff09; connect&#xff08;&#xff09;&#xff1b;链接作用 tcp的服务端&#xff1a; s…

性能测试全解

世界上没有陌生人&#xff0c;只有还没认识的朋友 一&#xff0e;性能测试的意义 由于软件系统的性能问题而引起严重后果的事件比比皆是&#xff0c;下面列举几个案例 (1)2007年10月&#xff0c;北京奥组委实行2008年奥运会门票预售&#xff0c;一时间订票官网访问量激致系统…

「知识篇」UWB精确测距与定位技术优势的详细探讨

UWB650模块是思为无线新发布的一款双边双向测距&#xff0c;三点平面定位模块&#xff0c;WB650模块是在UWB3000F27基础上研发&#xff0c;并搭载单片机&#xff0c;用户无需配置可直接使用。 遵循IEEE 802.15.4-2020标准的UWB技术及其通信协议&#xff0c;提供高精度、低功耗…

第12章 网络 (1)

目录 12.1 互联的计算机 12.2 ISO/OSI 和TCP/IP 参考模型 12.3 通过套接字通信 12.3.1 创建套接字 12.3.2 使用套接字 12.3.3 UDP套接字 12.4 网络实现的分层模型 本专栏文章将有70篇左右&#xff0c;欢迎关注&#xff0c;查看后续文章。 网络相关的头文件数目巨大&…

两台电脑之间记事本内容如何转移?

记事本是我们日常生活中不可或缺的工具&#xff0c;它轻便、简单&#xff0c;方便我们随时记录生活中的点滴、工作中的灵感或重要的事务。比如&#xff0c;在会议中快速记下关键点&#xff0c;或者在阅读时捕捉一闪而过的想法。然而&#xff0c;随着数字化生活的推进&#xff0…

重塑“我店”平台:绿色积分引领的数字消费新纪元

在数字化转型的洪流中&#xff0c;“我店”平台凭借其创新的绿色积分体系异军突起&#xff0c;成为市场中的璀璨新星。本文将深度剖析“我店”的运营模式、市场效应及其如何通过绿色积分机制开创消费新潮流。 一、崛起之路与市场震撼力 自2021年盛夏在上海启航以来&#xff0c…

研讨会邀请函-Parasoft TÜV Rheinland|SOA架构下符合功能安全要求的软件自动化测试解决方案

尊敬的技术先锋&#xff0c; 在汽车行业的数字化转型浪潮中&#xff0c;软件安全已成为我们共同关注的焦点。Parasoft 联合 TV Rheinland&#xff0c;荣幸地邀请您参与我们即将举办的专业研讨会&#xff0c;与行业领袖一同探索SOA架构下的功能安全软件开发测试方案。 会议议程…

支付宝小程序websocket长连接(心跳版本)

注意点&#xff1a; 关闭连接一定要把那些开下来的监听全部关闭掉 1.开启连接 /*长连接*/ connectWebSocket() {let that this;my.connectSocket({url: ws://192.xx.8.xx:7780/charger-service-netty/websocket/${uni.getStorageSync(chargePointId)},header: {AccessType: a…

三种相机模型总结(针孔、鱼眼、全景)

相机标定 文章目录 相机标定前言 前言 我们最常见的投影模型Perspective Projection Model描述的就是针孔相机的成像原理。从上面的图根据相似三角形可以得出 参考链接 https://zhuanlan.zhihu.com/p/540969207 相机标定之张正友标定法数学原理详解&#xff08;含python源码&a…

楼宇智慧公厕系统实时卫生状况一目了然

在科技飞速发展的今日&#xff0c;楼宇智慧公厕系统如一颗璀璨的新星&#xff0c;悄然改变着我们的生活。它以先进的技术手段&#xff0c;让公厕的实时卫生状况一目了然&#xff0c;为人们带来了全新的如厕体验。 当我们步入一栋现代化的楼宇&#xff0c;对公厕的期待不再仅仅是…

JVM 内存结构了解吗,每个区域都存放什么数据?

Java 程序是运行在 JVM 之中的&#xff0c;所有对象的创建和分配都在 JVM 中。 内存结构&#xff1a; 方法区&#xff1a;各线程共享&#xff0c;主要存放类信息、常量、静态变量 虚拟机栈&#xff1a;线程私有&#xff0c;主要存放基本数据类型&#xff08;int、char、float……

Blazor开发框架Known-V2.0.9

V2.0.9 Known是基于Blazor的企业级快速开发框架&#xff0c;低代码&#xff0c;跨平台&#xff0c;开箱即用&#xff0c;一处代码&#xff0c;多处运行。本次版本主要是修复一些BUG和表格页面功能增强。 官网&#xff1a;http://known.pumantech.comGitee&#xff1a; https:…

什么是蒙太奇谎言

蒙太奇谎言&#xff0c;可以理解为不表述全部事实&#xff0c;而是进表达部分事实&#xff0c;让听众形成错误的观点。 比如&#xff0c;某X国家队水平很差&#xff0c;从来没进入过世界杯。 可以这样说&#xff1a;世界足球强国巴西&#xff0c;从来没在世界大赛上赢过X国家队…

C++构造数据类型|枚举类型

C构造数据类型|枚举类型 1. 枚举类型1.1 函数重载的定义1.2 枚举类型的声明1.3 例1&#xff1a;1.4 例2&#xff1a; 2. 枚举类型的定义说明3. 枚举类型的使用3.1 枚举变量的赋值3.2 枚举变量的运算3.3 枚举变量的输入3.4 注意事项 4 示例代码 1. 枚举类型 1.1 函数重载的定义…

cdr工具介绍之刻刀工具

在日常的生活当中&#xff0c;在很多时候我们会遇到各种各样的难题&#xff0c;但软件cdr他就是一个神奇的存在&#xff0c;因为他能帮助我们解决很多专业方面的的知识。尽管他的内容相比较其他的一些设计软件而言相对于较为少&#xff0c;但是他确实一个非常适合于平常的工作学…

arthas源码刨析:arthas-core (2)

文章目录 attach JVMagent**ArthasBootstrap** arthas-core的启动可以从上一篇做参考 参考 pom&#xff0c;即启动是调用的 Arthas 的 main 方法 attach JVM JVM提供了 Java Attach 功能&#xff0c;能够让客户端与目标JVM进行通讯从而获取JVM运行时的数据&#xff0c;甚至可以…

算法-矩阵置零(73)

leetcode题目链接 这道题因为要求在O&#xff08;1&#xff09;的空间复杂度下面完成&#xff0c;所以最好的情况就是利用矩阵本身有的元素进行代码编写&#xff0c;而不另外开辟空间。 所以思路如下&#xff1a; 1.遍历第一行第一列&#xff0c;观察是否需要置0&#xff0c…

【面试实战】2024-08-22-面试总结

文章目录 1. 讲讲内存管理2. 什么是智能指针&#xff1f;有哪些种类&#xff1f;分别应用于哪些场景&#xff1f; 1. 讲讲内存管理 栈和堆的区别&#xff1a; ①栈和堆都是用来存储程序数据的内存区域。栈上的内存区域是有限的&#xff0c;栈用来存储局部变量和函数的调用信息。…

史上最强座舱AI芯登场,座舱「百模大战」爆发前夜

作者 |张马也 编辑 |德新 一场座舱大模型的竞赛&#xff0c;正在拉开序幕。 8月&#xff0c;英特尔在深圳举办AI座舱产品暨车载独立显卡发布会上。 会上&#xff0c;其发布了首款锐炫车载独立显卡ARC A760-A&#xff0c;这在已经高度内卷的座舱市场&#xff0c;又投下一颗重…