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

这篇具有很好参考价值的文章主要介绍了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` 等等。需要在代码中导入这些组件并声明相关使用，