高级搜索

src/components/tabs/index.module.scss

@@ -1,20 +1,28 @@
 .tabs_main{
     display: flex;
+    width: 100%;
     .tabs_scroll{
         width: 100%;
         display: flex;
         white-space: nowrap;
-        border-bottom: 1px solid $color_font_two;
-        border-top: 1px solid $color_font_two;
-        height: 102px;
-        
+        ::-webkit-scrollbar {
+            display:none;
+            width:0;
+            height:0;
+            color:transparent;
+        }
         .tabs_item{
             flex:1;
             display: inline-block;
-            padding: 10px 20px;
-            height: 100%;
-            box-sizing: border-box;
-            position: relative;
+            font-size: 24rpx;
+            background-color: #F0F0F0;
+            border-radius: 24rpx;
+            min-width: 126rpx;
+            height: 46.93rpx;
+            text-align: center;
+            line-height: 46.93rpx;
+            color: #707070;
+            margin-right: 20px;
             .tabs_item_con{
                 height: 100%;
                 display: flex;

src/components/tabs/index.tsx

@@ -13,10 +13,12 @@ type Params = {
     list?: ListProps[],
     defaultValue?: number|string,
     children?: ReactNode,
-    tabsOnClick?: (ListProps) => void
+    tabsOnClick?: (ListProps) => void,
+    style?:Object,
+
 }
 
-export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
+export default memo(({list = [], defaultValue = 0, tabsOnClick, style={}}: Params) => {
     
     const [selected, setSelected] = useState(defaultValue)
     const [tabId, setTabId] = useState('')
@@ -46,8 +48,7 @@ export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
                             list.map((item, index) => {
                                 return (
                                     <View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
-                                        <View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
-                                        {(selected == item.value) && <View className={styles.tabs_index}></View>}
+                                        <View  className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
                                     </View>
                                 )
                             })