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 (

{/* 商品信息 */}


商品名称
商品价格


{/* 规格选择 */}

选择： {spec.join('-')}
选择颜色
setSpec(value)}>
{
[...new Set(skuList.map(i => i.spec[0]))].map((color, index) =>
{color})
}

选择尺码
setSpec(prev => ([...prev, ...value]))}>
{
[...new Set(skuList.map(i => i.spec[1]))].map((size, index) => (
{size}
))
}


{/* 购买数量 */}

min={1}
max={100}
step={1}
value={num}
onChange={value => setNum(value)}
/>


{/* 确认按钮 */}

确认



);
}
```

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

export default App;
```

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

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

若有收获，就点个赞吧