Taro跨端开发探索14——商城小程序商品列表页面开发

前言

昨天我们完成了所有的商品搜索引导和搜索入口页面。今天我们基于京喜小程序分析一下商品搜索页面的需求并实现它

需求分析

我们先看一下京喜的商品搜索页面

我们昨天已经实现了最顶部的搜索功能。今天我们针对于一下几个功能开展开讲一下

• 综合筛选、销量、价格
  • 综合排序的用手风琴暂时没有实现，我再试一下用列表筛选
• 一列展示变为两列展示
• 列表加载
• todo
  • 筛选页面（筛选页面实现起来比较复杂，要基于action传值，明天我去学习一下）

列表加载和单双列列加载

我们从看起来比较好做的列表加载和单双列加载来做起。我们可以看到，列表加载其实和我们首页的商品列表加载差不多。
我们在做单双列切换的时候，只需要控制一下样式即可。
我的实现逻辑是这样的：假设我们有4条数据

• 要单列展示。我们就设置每个view的宽度为100%。这样4个元素就能按行展示了
• 要双列展示。我们就设置每个view的宽度为50%，这样2个元素占用一行。注意我们要设置变量的view为行内元素，否则还是会换行

goods-list/index.tsx

import { ScrollView, Text, View } from "@tarojs/components";
import { AtImagePicker, AtButton } from "taro-ui";
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, set