uniapp制作--进步器的选择

介绍:

        进步器的选择,一般用于商城购物选择物品数量的场景

        注意:该输入框只能输入大于或等于0的整数    

效果展示:

   

代码展示:

        

    以下是一个简单的购物车页面示例,包括选择商品和显示数量的功能:

        在这个示例中,我们展示了一个简单的购物车页面,包括商品名称、价格和数量。通过点击 "+" 和 "-" 按钮来增加或减少商品数量,并保证数量不少于 1。你可以根据实际需求和设计风格进行修改和扩展。

<template><view class="container"><view v-for="(item, index) in productList" :key="index" class="product-item"><view class="product-info"><view class="product-name">{{ item.name }}</view><view class="product-price">¥ {{ item.price }}</view></view><view class="product-action"><view class="select-box"><view class="select-minus" @click="decreaseQuantity(index)">-</view><view class="select-quantity">{{ item.quantity }}</view><view class="select-plus" @click="increaseQuantity(index)">+</view></view></view></view></view>
</template><script>
export default {data() {return {productList: [{ name: '商品1', price: 50, quantity: 1 },{ name: '商品2', price: 60, quantity: 1 },{ name: '商品3', price: 70, quantity: 1 },// 可以根据需要添加更多的商品]};},methods: {increaseQuantity(index) {this.productList[index].quantity++;},decreaseQuantity(index) {if (this.productList[index].quantity > 1) {this.productList[index].quantity--;}}}
};
</script><style>
.container {padding: 20px;
}.product-item {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;
}.product-info {flex: 1;
}.product-name {font-size: 16px;color: #333;
}.product-price {font-size: 14px;color: #999;
}.product-action {display: flex;align-items: center;
}.select-box {display: flex;align-items: center;
}.select-minus,
.select-plus {width: 30px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;border-radius: 4px;font-size: 20px;cursor: pointer;
}.select-quantity {width: 40px;height: 30px;line-height: 30px;text-align: center;margin: 0 5px;
}
</style>

        以上是一个使用原生态uniapp制作的进步器。

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

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

相关文章

探索人工智能的关键术语与方法

目录 前言1 机器学习&#xff08;Machine Learning&#xff09;2 数据科学&#xff08;Data Science&#xff09;3 监督学习&#xff08;Supervised Learning&#xff09;4 无监督学习&#xff08;Unsupervised Learning&#xff09;5 深度学习&#xff08;Deep Learning&#…

紫光展锐T618_4G安卓核心板方案定制

紫光展锐T618核心板是一款采用纯国产化方案的高性能产品&#xff0c;搭载了开放的智能Android操作系统&#xff0c;并集成了4G网络&#xff0c;支持2.5G5G双频WIFI、蓝牙近距离无线传输技术以及GNSS无线定位技术。 展锐T618核心板应用旗舰级 DynamlQ架构 12nm 制程工艺&#x…

私有化部署自己的ChatGPT,免费开源的chatgpt-next-web搭建

随着AI的应用变广&#xff0c;各类AI程序已逐渐普及&#xff0c;尤其是在一些日常办公、学习等与撰写/翻译文稿密切相关的场景&#xff0c;大家都希望找到一个适合自己的稳定可靠的ChatGPT软件来使用。 ChatGPT-Next-Web就是一个很好的选择。它是一个Github上超人气的免费开源…

简单介绍一下Qt动画系统,并举例说明如何使用

目录 Qt动画系统介绍 分类举例说明 1. 属性动画&#xff08;Property Animation&#xff09;&#xff1a; 2. 并行动画&#xff08;Parallel Animation&#xff09;&#xff1a; 3. 顺序动画&#xff08;Sequential Animation&#xff09;&#xff1a; 4. 动画组&#xf…

闯入监测报警摄像机

闯入监测报警摄像机是用于监测和报警未经授权者闯入特定区域的安全设备。该摄像机通常设置在建筑物、仓库、办公室等需要保护的场所&#xff0c;用于监控周围环境并及时警示相关人员。闯入监测报警摄像机是一种集视频监控和报警功能于一体的安全设备&#xff0c;旨在防范和监测…

2024/3/5打卡线性DP问题---数字三角形*

线性DP&#xff1a; 所谓线性DP&#xff0c;是指递推方程有一种明显的线性关系存在。 在状态规划中&#xff0c;状态可以是一维的&#xff0c;二维的&#xff0c;多维的。例如&#xff0c;在背包问题中&#xff0c;就是一个二维的状态&#xff0c;在求解状态的时候&#xff0c;…

【Deep Dive:AI Webinar】我们是否能将开源许可用于机器学习和人工智能模型?

【深入探讨人工智能】网络研讨系列总共有 17 个视频。我们按照视频内容&#xff0c;大致上分成了 3 个大类&#xff1a; 1. 人工智能的开放、风险与挑战&#xff08;4 篇&#xff09; 2. 人工智能的治理&#xff08;总共 12 篇&#xff09;&#xff0c;其中分成了几个子类&…

用winsw将nodejs项目的exe程序安装为服务

winsw是一个开源项目&#xff0c;程序以及源码可以在Git Hub中下载&#xff1a; Releases winsw/winsw GitHub winsw是一个可以将任何应用程序注册成服务的软件 下载winse.exe winsw.xml配置如下&#xff1a; <service> <id>node-service/id> &…

IDEA创建Sping项目只能勾选17和21,却无法使用Java8

报错信息 The required java version 17 is not supported by the project SDK 1.8.The maximum supported Java version is 8. 想创建一个springboot项目&#xff0c;本地安装jdk版本为1.8&#xff0c;但是在使用 Spring Initializr创建项目时,版本只能选择21或17&#xff0c;…

MySQL面试题纯享版

基础内容 1、MySQL的架构分层 2、一条 SQL 查询语句的执行流程 3、如何查看 MySQL 服务被多少个客户端连接了&#xff1f; 4、 空闲连接会一直占用着吗&#xff1f; 5、MySQL 的连接数有限制吗&#xff1f; 6、 怎么解决长连接占用内存的问题&#xff1f; 7、执行器与存储引擎…

前端高频面试--查缺补漏篇

什么是进程和线程&#xff0c;有什么区别 进程&#xff1a;进程是程序的一次执行过程&#xff0c;是动态的过程&#xff0c;有自身产生、存在、消亡的过程。 线程&#xff1a;线程由进程创建&#xff0c;是进程的一个实体。一个进程可以拥有多个线程。 举个例子&#xff1a;…

rust学习(tokio future分析)

自己编写一个impl future来看一下Tokio的是如何实现的。 第一步&#xff1a; 代码&#xff1a; struct TExecuteTask {count:u32 }impl Future for TExecuteTask {type Output ();fn poll(self: Pin<&mut Self>, cx: &mut Context<_>) -> Poll<S…

「优选算法刷题」:字符串相乘

一、题目 给定两个以字符串形式表示的非负整数 num1 和 num2&#xff0c;返回 num1 和 num2 的乘积&#xff0c;它们的乘积也表示为字符串形式。 注意&#xff1a;不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例 1: 输入: num1 "2", num2 &quo…

AI大预言模型——ChatGPT与AI绘图及论文高效写作

原文链接&#xff1a;AI大预言模型——ChatGPT与AI绘图及论文高效写作 2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网…

03:大数据与Hadoop|分布式文件系统|分布式Hadoop集群

大数据与Hadoop&#xff5c;分布式文件系统&#xff5c;分布式Hadoop集群 Hadoop部署Hadoop HDFS分布式文件系统HDFS部署步骤一&#xff1a;环境准备HDFS配置文件 查官方手册配置Hadoop集群 日志与排错 mapreduce 分布式离线计算框架YARN集群资源管理系统步骤一&#xff1a;安装…

Java已死?大学生还有必要学习Java吗【底部明信片,添加可进大学生求职社群】

目录 1. Java的历史与底蕴 2. 企业级应用的稳定性 3. Android应用开发 4. 大数据和云计算 5. 补充现代技术栈 6. Java生态系统的完备性 在技术的迅速演进中&#xff0c;有人开始质疑传统编程语言的地位&#xff0c;其中Java也未能幸免。然而&#xff0c;尽管一些人宣称“…

安卓开发:计时器

一、新建模块 二、填写应用名称和模块名称 三、选择模块&#xff0c;Next 四、可以保持不变&#xff0c;Finish 五、相关目录文件 六、相关知识 七、&#xff1f;

基本设计模式

单例模式 ES5 function Duck1(name:string){this.namenamethis.instancenull }Duck1.prototype.getNamefunction(){console.log(this.name) }Duck1.getInstancefunction(name:string){if(!this.instance){this.instance new Duck1(name)} } const aDuck1.getInstance(a) const…

PyTorch深度学习实战(38)——StyleGAN详解与实现

PyTorch深度学习实战&#xff08;38&#xff09;——StyleGAN详解与实现 0. 前言1. StyleGAN1.1 模型介绍1.2 模型策略分析 2. 实现 StyleGAN2.1 生成图像2.2 风格迁移 小结系列链接 0. 前言 StyleGAN (Style-Generative Adversarial Networks) 是生成对抗网络 (Generative Ad…

电商运营神器:如何利用数据API进行市场分析

在电子商务领域&#xff0c;市场分析是至关重要的一环。利用数据API进行市场分析可以帮助电商运营者洞察市场趋势、优化营销策略、提高用户满意度&#xff0c;并最终增加销售额。以下是如何利用数据API进行市场分析的一些关键步骤和策略&#xff1a; 获取市场数据 首先&#…