Taro 跨端开发实战教程：打造优雅高效的商城小程序商品列表页面

前端

2023-10-06 16:49:02

好的，以下是有关 Taro 跨端开发探索 14——商城小程序商品列表页面开发的内容。

前言

欢迎来到 Taro 跨端开发探索系列的第 14 篇文章！在这一系列的文章中，我们将深入探究 Taro 跨端开发框架，学习如何构建跨平台的小程序、H5 和 React Native 应用。

在今天的文章中，我们将聚焦于商城小程序商品列表页面的开发。我们将从分析商品搜索页面的需求开始，然后一步步实现商品列表单双列的切换和几个简单的检索功能。

需求分析

在开始开发之前，我们需要先明确商品搜索页面的需求。一般来说，商品搜索页面应该具备以下功能：

商品列表的展示：将商品信息以列表的形式展示出来，包括商品名称、价格、图片等信息。
商品列表的筛选：允许用户根据商品的分类、价格、销量等条件进行筛选。
商品列表的排序：允许用户根据商品的价格、销量、好评度等条件进行排序。
商品详情页面的跳转：当用户点击商品列表中的某个商品时，应该跳转到该商品的详情页面。

开发实现

1. 商品列表的展示

首先，我们需要将商品信息以列表的形式展示出来。我们可以使用 Taro UI 组件库中的 List 组件来实现这一需求。List 组件是一个通用的列表组件，它可以展示各种类型的数据，包括商品信息。

import { List } from '@tarojs/components';

const GoodsList = () => {
  const goods = [
    {
      id: 1,
      name: 'iPhone 13 Pro Max',
      price: 9999,
      image: 'https://www.apple.com/cn/iphone-13-pro/images/overview/hero__e0f6dd4d-20bb-48a5-894d-776a3f3e103b_large.jpg',
    },
    // ...
  ];

  return (
    <List>
      {goods.map(item => (
        <List.Item key={item.id}>
          <List.ItemMeta
            title={item.name}
            description={item.price}
            thumb={item.image}
          />
        </List.Item>
      ))}
    </List>
  );
};

export default GoodsList;

2. 商品列表的筛选

接下来，我们需要实现商品列表的筛选功能。我们可以使用 Taro UI 组件库中的 Picker 组件来实现这一需求。Picker 组件是一个通用的选择器组件，它可以允许用户从一组选项中进行选择。

import { Picker } from '@tarojs/components';

const GoodsFilter = () => {
  const [category, setCategory] = useState('');
  const [price, setPrice] = useState('');
  const [sales, setSales] = useState('');

  const categories = [
    {
      label: '全部',
      value: '',
    },
    // ...
  ];

  const prices = [
    {
      label: '全部',
      value: '',
    },
    // ...
  ];

  const sales = [
    {
      label: '全部',
      value: '',
    },
    // ...
  ];

  return (
    <View>
      <Picker mode="selector" value={category} onChange={setCategory}>
        {categories.map(item => (
          <Picker.Option key={item.value} value={item.value}>{item.label}</Picker.Option>
        ))}
      </Picker>
      <Picker mode="selector" value={price} onChange={setPrice}>
        {prices.map(item => (
          <Picker.Option key={item.value} value={item.value}>{item.label}</Picker.Option>
        ))}
      </Picker>
      <Picker mode="selector" value={sales} onChange={setSales}>
        {sales.map(item => (
          <Picker.Option key={item.value} value={item.value}>{item.label}</Picker.Option>
        ))}
      </Picker>
    </View>
  );
};

export default GoodsFilter;

3. 商品列表的排序

接下来，我们需要实现商品列表的排序功能。我们可以使用 Taro UI 组件库中的 SortBar 组件来实现这一需求。SortBar 组件是一个通用的排序组件，它可以允许用户根据不同的条件对数据进行排序。

import { SortBar } from '@tarojs/components';

const GoodsSort = () => {
  const [sortKey, setSortKey] = useState('price');
  const [sortOrder, setSortOrder] = useState('asc');

  const sortKeys = [
    {
      label: '价格',
      value: 'price',
    },
    {
      label: '销量',
      value: 'sales',
    },
    {
      label: '好评度',
      value: 'rate',
    },
  ];

  const sortOrders = [
    {
      label: '升序',
      value: 'asc',
    },
    {
      label: '降序',
      value: 'desc',
    },
  ];

  return (
    <SortBar
      sortKey={sortKey}
      sortOrder={sortOrder}
      onSortChange={(sortKey, sortOrder) => {
        setSortKey(sortKey);
        setSortOrder(sortOrder);
      }}
      sortKeys={sortKeys}
      sortOrders={sortOrders}
    />
  );
};

export default GoodsSort;

4. 商品详情页面的跳转

最后，我们需要实现当用户点击商品列表中的某个商品时，跳转到该商品的详情页面。我们可以使用 Taro UI 组件库中的 navigateTo 函数来实现这一需求。

import { navigateTo } from '@tarojs/taro';

const GoodsList = () => {
  const goods = [
    {
      id: 1,
      name: 'iPhone 13 Pro Max',
      price: 9999,
      image: 'https://www.apple.com/cn/iphone-13-pro/images/overview/hero__e0f6dd4d-20bb-48a5-894d-776a3f3e103b_large.jpg',
    },
    // ...
  ];

  return (
    <List>
      {goods.map(item => (
        <List.Item key={item.id} onClick={() => navigateTo({ url: `/pages/goods/${item.id}` })}>
          <List.ItemMeta
            title={item.name}
            description={item.price}
            thumb={item.image}
          />
        </List.Item>
      ))}
    </List>
  );
};

export default GoodsList;