Taro跨端开发探索13——商城小程序分类页面开发

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

前言

昨天我们实现了引导用户在商城小程序上，从首页进入搜索页搜索然后进入商品列表页的功能。今天我们开发一下分类型筛选的功能

需求分析

商城小程序中分类搜索要实现的功能较为简单，我们还是先看一下京喜小程序的分类搜索页面，进行需求拆分

如上图所示，我们可以看到分类搜索注意的区域有三个，从上到下依次为

• 搜索引导页 这个地方的逻辑和昨天我们开发的搜索引导页面的功能差不多，也是在用户手指聚焦搜索框的时候，引导用户进入搜索页面
• 一级分类列表 这里我们可以看到该区域支持下拉加载，点击左侧的一级分类时，右侧会显示改一级分类下的字分类
• 子级分类列表 作为展示子分类的区域，点击子分类的时候会跳转到商品搜索页

代码实现

搜索引导页

我们在category/index.tsx中先添加和昨天类似的搜索引导的代码如下

import { View } from "@tarojs/components";
import "./index.scss";
import { AtSearchBar } from "taro-ui";
import Taro from "@tarojs/taro";

export default function Category() {
  return (
    <View className="category">
      <AtSearchBar
        value={""}
        onChange={() => {}}
        onFocus={() => {
          Taro.navigateTo({ url: "/sub-query-pages/goods-query/index" });
        }}
      />
    </View>
  );
}

不要忘记引入scss。category/index.scss代码如下

@import "~taro-ui/dist/style/components/search-bar.scss";
@import "~taro-ui/dist/style/components/icon.scss";

实现父子分类搜索联动

我们使用垂直的tab实现父子组件联动,代码如下

import { View } from "@tarojs/components";
import "./index.scss";
import Taro from "@tarojs/taro";
import { AtTabs, AtTabsPane, AtSearchBar } from "taro-ui";
import { useState } from "react";

export default function Category() {
  const firstCategoryArr = [
    { id: 1, title: "美食" },
    { id: 2, title: "电影" },
    { id: 3, title: "酒店" },
    { id: 4, title: "休闲娱乐" },
    { id: 5, title: "外卖" },
    { id: 6, title: "超市" },
    { id: 7, title: "KTV" },
    { id: 8, title: "周边游" },
  ];
  const secondCategoryArr = [
    { pId: 1, id: 111, title: "美食1" },
    { pId: 1, id: 112, title: "美食2" },
    { pId: 1, id: 113, title: "美食3" },
    { pId: 2, id: 211, title: "电影1" },
    { pId: 2, id: 212, title: "电影2" },
    { pId: 2, id: 213, title: "电影3" },
    { pId: 3, id: 311, title: "酒店1" },
    { pId: 3, id: 312, title: "酒店2" },
    { pId: 3, id: 313, title: "酒店3" },
    { pId: 4, id: 411, title: "休闲娱乐1" },
    { pId: 4, id: 412, title: "休闲娱乐2" },
    { pId: 4, id: 413, title: "休闲娱乐3" },
    { pId: 5, id: 511, title: "外卖1" },
    { pId: 5, id: 512, title: "外卖2" },
    { pId: 5, id: 513, title: "外卖3" },
  ];
  const [currentFirstCate, setCurrentFirstCate] = useState(0);
  return (
    <View className="category">
      <AtSearchBar
        value={""}
        onChange={() => {}}
        onFocus={() => {
          Taro.navigateTo({ url: "/sub-query-pages/goods-query/index" });
        }}
      />
      <AtTabs
        current={currentFirstCate}
        scroll
        tabDirection="vertical"
        tabList={firstCategoryArr}
        onClick={(value) => {
          setCurrentFirstCate(value);
        }}
      >
        {firstCategoryArr.map((firstCate, index) => (
          <AtTabsPane
            tabDirection="vertical"
            current={index}
            index={index}
            className="category-item"
          >
            {index === currentFirstCate
              ? secondCategoryArr.map((secondCate) =>
                  secondCate.pId === firstCate.id ? (
                    <View
                      onClick={() =>
                        Taro.navigateTo({
                          url: `/sub-query-pages/goods-list/index?categoryId=${secondCate.id}`,
                        })
                      }
                    >
                      标签页一的内容{currentFirstCate}
                      {secondCate.title}
                    </View>
                  ) : null
                )
              : null}
          </AtTabsPane>
        ))}
      </AtTabs>
    </View>
  );
}

还需要引入对应的tab的scss,index.scss的代码如下

@import "~taro-ui/dist/style/components/search-bar.scss";
@import "~taro-ui/dist/style/components/icon.scss";
@import "~taro-ui/dist/style/components/tabs.scss";
.category {
  .category-item {
    overflow: visible;
  }
}

我们在/goods-list/index.tsx中添加取分类id获取的代码，最后如下

import { View } from "@tarojs/components";
import { AtSearchBar } from "taro-ui";
import { useEffect, useState } from "react";
import "./index.scss";
import { getCurrentInstance } from "@tarojs/taro";

export default function GoodsList() {
  const { router } = getCurrentInstance();
  const [queryKey, setQueryKey] = useState("");
  const [queryCateId, setQueryCateId] = useState("");
  useEffect(() => {
    const searchKey = router && router.params.searchKey;
    const categoryId = router && router.params.categoryId;

    if (searchKey) {
      setQueryKey(searchKey);
      console.log("searchKey", searchKey);
    }
    if (categoryId) {
      setQueryCateId(categoryId);
      console.log("queryCateId", categoryId);
    }
  }, []);
  return (
    <View>
      <AtSearchBar
        onActionClick={() => console.log("queryKey")}
        focus={true}
        value={queryKey}
        placeholder="请输入搜索条件"
        onChange={(value) => {
          setQueryKey(value);
        }}
      />
    </View>
  );
}

最终我们的首页进入搜索页面输入搜索条件跳转商品列表和从分类进入搜索页面跳转商品列表的输出如下

结语

我们今天实现了分类搜索的父子级联动，和点击子级跳转到搜索的功能。明天我们针对于商品搜索进行需求分析和业务开发。欢迎大家多多关注！