自定列表导航栏

src/components/CourtType/index.module.scss

@@ -0,0 +1,3 @@
+.courtTypeWrapper {
+  margin-bottom: 18px;
+}

src/components/CourtType/index.tsx

@@ -0,0 +1,31 @@
+import { View, Image } from "@tarojs/components";
+import TitleComponent from "@/components/Title";
+import img from "@/config/images";
+import Bubble from "../Bubble";
+import { BubbleOption } from "types/list/types";
+import styles from './index.module.scss'
+
+interface IProps {
+  name: string;
+  options: BubbleOption[];
+  value: string;
+  onChange: (name: string, value: string) => void;
+}
+const GamePlayType = (props: IProps) => {
+  const { name, onChange , options, value} = props;
+  return (
+    <View className={styles.courtTypeWrapper}>
+      <TitleComponent title="场地类型" icon={<Image src={img.ICON_SITE} />} />
+      <Bubble
+        options={options}
+        value={value}
+        onChange={onChange}
+        layout="grid"
+        size="small"
+        columns={3}
+        name={name}
+      />
+    </View>
+  );
+};
+export default GamePlayType;