自定列表导航栏

src/components/GamePlayType/index.module.scss

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

src/components/GamePlayType/index.tsx

@@ -1,13 +1,31 @@
-import PopupGameplay from "../../pages/publishBall/components/PopupGameplay";
-import { View, Text, Image } from "@tarojs/components";
+// import PopupGameplay from "../../pages/publishBall/components/PopupGameplay";
+import { View, Image } from "@tarojs/components";
 import TitleComponent from "@/components/Title";
 import img from "@/config/images";
-
-const GamePlayType = () => {
+import Bubble from "../Bubble";
+import styles from "./index.module.scss";
+import { BubbleOption } from "types/list/types";
+interface IProps {
+  name: string;
+  value: string;
+  options: BubbleOption[];
+  onChange: (name: string, value: string) => void;
+}
+const GamePlayType = (props: IProps) => {
+  const { name, onChange, value, options } = props;
   return (
-    <View>
+    <View className={styles.gamePlayWrapper}>
       <TitleComponent title="玩法" icon={<Image src={img.ICON_SITE} />} />
-      <PopupGameplay
+      <Bubble
+        options={options}
+        value={value}
+        onChange={onChange}
+        layout="grid"
+        size="small"
+        columns={3}
+        name={name}
+      />
+      {/* <PopupGameplay
         onClose={() => {
           console.log("onClose");
         }}
@@ -19,9 +37,10 @@ const GamePlayType = () => {
           { label: "不限", value: "不限" },
           { label: "单打", value: "单打" },
           { label: "双打", value: "双打" },
+          { label: "娱乐", value: "娱乐" },
           { label: "拉球", value: "拉球" },
         ]}
-      />
+      /> */}
     </View>
   );
 };