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

前言

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

需求分析

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

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

• 搜索引导页

这个地方的逻辑和昨天我们开发的搜索引导页面的功能差不多，也是在用户手指聚焦搜索框的时候，引导用户进入搜索页面

• 一级分类列表

这里我们可以看到该区域支持下拉加载，点击左侧的一级分类时，右侧会显示改一级分类下的字分类

• 子级分类列表

作为展示子分类的区域，点击子分类的时候会跳转到商品搜索页

代码实现

搜索引导页

我们在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&