taro.js和nutui实现商品选择页面

1. 首先安装 Taro.js 和 NutUI:

```
npm install -g @tarojs/cli
npm install taro-ui
```

2. 创建 Taro 项目并进入项目目录:

```
taro init myapp
cd myapp
```

3. 选用 Taro 模板一并安装依赖:

```
npm install
```

4. 在页面目录中创建商品选择页:

```
taro create --name goods --type page
```

5. 在 `goods.jsx`中导入并使用 Taro-ui 组件库相关的组件:

```jsx
import Taro, { useState } from "@tarojs/taro";
import { View, Text, Image, Button, Checkbox, CheckboxGroup } from "@tarojs/components";
import { AtInputNumber, AtDivider, AtButton } from "taro-ui";
// 这里假设我们有两个规格参数,分别是颜色和尺码,定义一个数组
const skuList = [
{
id: 1,
spec: ['红色', 'L'],
price: 100,
},
{
id: 2,
spec: ['红色', 'M'],
price: 98,
},
{
id: 3,
spec: ['蓝色', 'L'],
price: 99,
},
{
id: 4,
spec: ['蓝色', 'M'],
price: 97,
},
];
export default function Goods() {
// 存储当前选择的规格,初始为空
const [spec, setSpec] = useState([]);
// 存储当前选择的数量,初始为1
const [num, setNum] = useState(1);
return (
<View>
{/* 商品信息 */}
<View>
<Image src="https://placehold.it/100" />
<Text>商品名称</Text>
<Text>商品价格</Text>
</View>
<AtDivider />
{/* 规格选择 */}
<View>
<Text>选择: {spec.join('-')}</Text>
<View>选择颜色</View>
<CheckboxGroup onChange={value => setSpec(value)}>
{
[...new Set(skuList.map(i => i.spec[0]))].map((color, index) =>
<Checkbox key={index} value={color}>{color}</Checkbox>)
}
</CheckboxGroup>
<View>选择尺码</View>
<CheckboxGroup onChange={value => setSpec(prev => ([...prev, ...value]))}>
{
[...new Set(skuList.map(i => i.spec[1]))].map((size, index) => (
<Checkbox key={index} value={size}>{size}</Checkbox>
))
}
</CheckboxGroup>
<AtDivider />
{/* 购买数量 */}
<View>
<AtInputNumber
min={1}
max={100}
step={1}
value={num}
onChange={value => setNum(value)}
/>
</View>
<AtDivider />
{/* 确认按钮 */}
<View>
<AtButton type='primary'>确认</AtButton>
</View>
</View>
</View>
);
}
```

6. 在 `app.jsx` 中注册并配置 Taro-ui 组件库:

```jsx
import Taro from "@tarojs/taro";
import { AtButton } from "taro-ui";
import "taro-ui/dist/style/index.scss"; // 一定要引入样式

function App({ children }) {
return <View>{children}</View>;
}

export default App;
```

这样,在 Taro.js 和 NutUI 的基础上我们已经编写了一个基本的商品选择页面。当用户选择商品规格和数量后,点击确认按钮即可触发相应的事件进行下单操作。

需要注意的是,这里使用了不少的 Taro-ui 组件,比如 `AtInputNumber`、`AtDivider` 以及 `AtButton` 等等。需要在代码中导入这些组件并声明相关使用,

若有收获,就点个赞吧

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

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

相关文章

JVM运行时数据区

文章目录 JVM内存结构图1、运行时数据区域JDK 1.7JDK 1.81. 线程栈&#xff08;虚拟机栈&#xff09;2. 本地方法栈3. 程序计数器4. 方法区&#xff08;元空间&#xff09;5. 堆6、运行时常量池&#xff08;Runtime Constant Pool&#xff09;7、直接内存&#xff08;Direct Me…

云计算——虚拟化中的网络架构与虚拟网络(文末送书)

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 公众号&#xff1a;网络豆 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a; 网络豆的主页​​​​​ 目录 前期回顾 前言 一.网卡虚拟化 1.网卡虚拟化方法&…

spring websocket demo

一 java依赖 gradle 配置 implementation "org.springframework.boot:spring-boot-starter-websocket" implementation "org.springframework.security:spring-security-messaging" 二 配置WebSocketConfig import org.springframework.beans.factory.a…

基于 vue2 发布 npm包

背景&#xff1a;组件化开发需要&#xff0c;走了一遍发布npm包的过程&#xff0c;采用很简单的模式实现包的发布流程&#xff0c;记录如下。 项目参考&#xff1a;基于vue的时间播放器组件&#xff0c;并发布到npm_timeplay.js_xmy_wh的博客-CSDN博客 1、项目初始化 首先&a…

C语言练习题解析:挑战与突破,开启编程新篇章!(1)

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言刷题专栏&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅C语言进阶之路&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐&a…

记录在ubuntu 18.04系统上安装虚拟机的过程

- 下载ubuntu镜像 ubuntu镜像下载地址 我下载的是desktop桌面版&#xff0c;比较好操作。 - 烧录 我用的Mac&#xff0c;使用的是balenaEtcher软件进行磁盘烧录。 balenaEtcher下载地址 如果出现磁盘损坏或者无法再次使用&#xff0c;参考这里解决&#xff1a;进入 - 安…

Vue项目直接报错

最近自己在做一个vue2项目&#xff0c;vue并不熟悉&#xff0c;所以求解&#xff01;&#xff01;&#xff01; 通过命令&#xff1a;vue create app 创建项目&#xff0c;但打开后&#xff0c;浏览器直接报错&#xff0c;意思为&#xff1a;不能在模块外使用import语句(at ho…

多维时序 | MATLAB实现SABO-CNN-GRU-Attention多变量时间序列预测

多维时序 | MATLAB实现SABO-CNN-GRU-Attention多变量时间序列预测 目录 多维时序 | MATLAB实现SABO-CNN-GRU-Attention多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | MATLAB实现SABO-CNN-GRU-Attention多变量时间序列预测。 模型描…

框架分析(5)-Django

框架分析&#xff08;5&#xff09;-Django 专栏介绍Django核心概念以及组件讲解模型&#xff08;Model&#xff09;视图&#xff08;View&#xff09;模板&#xff08;Template&#xff09;路由&#xff08;URLconf&#xff09;表单&#xff08;Form&#xff09;后台管理&…

vue中bus的使用和涉及到的问题

创建一个js文件 import Vue from "Vue" export default new Vue 我们可以直接在要使用的页面中引用使用 import bus from /assets/js/eventBus.js;bus.$emit("info", "123") // 使用bus.$on("info", (val) > { // 接收console.l…

【【萌新的STM32学习20--按键输入实验】】

萌新的STM32学习20–按键输入实验 在了解完蜂鸣器的实验之后我们又进行一个小实验 又是正点原子没有上课讲解的实验 对于这种不平滑的情况我们更多的也会去选择方法进行消除抖动 软件消抖&#xff1a;方法很多&#xff0c;我们例程中使用最简单的延时消抖。检测到按键按下后&…

GitLab启动失败:fail: alertmanager: runsv not running

问题描述 sudo gitlab-ctl restart &#xff0c;报错如下 &#xff1a; summergaoubuntu:/etc/gitlab$ sudo gitlab-ctl start fail: alertmanager: runsv not running fail: gitaly: runsv not running fail: gitlab-exporter: runsv not running fail: gitlab-workhorse: …

Linux 中list.h使用实例和坑

以前都是自己写链表或者所用框架都自带链表操作&#xff0c;本次工作换了框架没有找到框架自带的链表操作&#xff0c;所以尝试使用linux自带的list.h中定义的相关宏和函数写了简单的链表操作&#xff0c;竟然踩坑了&#xff0c;记录一下。 一、list.h简介 list.h一般放在inc…

【JavaWeb 专题】15个最经典的JavaWeb面试题

文章目录 HTTP长连接和短连接HTTP/1.1 与 HTTP/1.0 的区别可扩展性缓存带宽优化长连接消息传递Host 头域错误提示 AjaxAjax 的优势&#xff1a; JSP 和 servlet 有什么区别&#xff1f;定义区别 JSP 的9大内置对象及作用JSP 的 4 种作用域&#xff1f;session 和 cookie 有什么…

ptmalloc源码分析 - 分配区heap_info结构实现(5)

目录 一、heap_info是什么&#xff1f; 二、heap_info结构图 三、new_heap的实现 四、grow_heap的实现 五、shrink_heap的实现 六、delete_heap的实现 一、heap_info是什么&#xff1f; 上一章节《ptmalloc源码分析 - 多线程争抢竞技场Arena的实现&#xff08;04&#xf…

ATA-2161高压放大器的电子实验案例(案例合集)

ATA-2161是一款理想的可放大交直流信号的单通道高压放大器。最大差分输出1600Vp-p(800Vp)高压&#xff0c;可以驱动高压型负载。凭借其优异的指标参数受到不少电子工程师的喜欢&#xff0c;其在电子实验中的应用也非常频繁&#xff0c;下面为大家整理出ATA-2161高压放大器的应用…

代码随想录打卡—day46—【DP】— 8.29 背包END

1 139. 单词拆分 139. 单词拆分 做了很久...估计2h 一开始我的思路卡死了 看题解之后的思路的详解见注释&#xff0c; 我的写法和carl 答案在一些微小的细节上略有不同&#xff0c;我的更好理解&#xff0c;但他的解法更简单。 我写的过程中&#xff0c;需要注意下标和字符…

为何直线导轨要保持日常清洁?

随着时代的发展&#xff0c;已逐步从传统的工业发展模式发展到工业自动化&#xff0c;直线滑轨在工业生产中得到了广泛的应用&#xff0c;大大提高了生产效率&#xff0c;带动了经济效益的增长。 众所周知&#xff0c;想要直线导轨的使用达到预期的效果&#xff0c;日常的保养和…

【论文笔记】Planning and Decision-Making for Autonomous Vehicles

文章目录 Summary1. INTRODUCTION2. MOTION PLANNING AND CONTROL2.1. Vehicle Dynamics and Control2.2. Parallel Autonomy2.3. Motion Planning for Autonomous Vehicles 3. INTEGRATED PERCEPTION AND PLANNING3.1. From Classical Perception to Current Challenges in Ne…

1688API技术解析,实现获得1688商品详情

要实现获得1688商品详情&#xff0c;你需要使用1688 API。1688 API是阿里巴巴旗下的开放平台&#xff0c;它提供了一套丰富的接口&#xff0c;可以让开发者通过编程的方式获取到1688网站上的商品信息。 首先&#xff0c;你需要在阿里开放平台注册一个账号&#xff0c;并创建一…