前言
昨天我们完成了所有的商品搜索引导和搜索入口页面。今天我们基于京喜小程序分析一下商品搜索页面的需求并实现它
需求分析
我们先看一下京喜的商品搜索页面
我们昨天已经实现了最顶部的搜索功能。今天我们针对于一下几个功能开展开讲一下
- 综合筛选、销量、价格
- 综合排序的用手风琴暂时没有实现,我再试一下用列表筛选
- 一列展示变为两列展示
- 列表加载
- 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, se