cxw-010203

app.js

@@ -1,6 +1,6 @@
 //app.js
 App({
   globalData: {
-    
+
   }
 })

app.json

@@ -63,8 +63,8 @@
     "van-cell-group": "@vant/weapp/cell-group/index",
     "van-tab": "@vant/weapp/tab/index",
     "van-tabs": "@vant/weapp/tabs/index",
-    "van-image": "@vant/weapp/image/index"
-  
+    "van-image": "@vant/weapp/image/index",
+    "van-transition": "@vant/weapp/transition/index"
     
   }
   

pages/brandSearch/index.js

@@ -3,7 +3,38 @@
 Page({
     data: {
         value: "",
-        active: 0
+        tabActive: 0,
+        active: 1,
+        navData: [
+            {
+                img: "./cars/audi.jpg",
+                title: "奥迪"
+            },
+            {
+                img: "./cars/audi.jpg",
+                title: "奥迪"
+            },
+            {
+                img: "./cars/audi.jpg",
+                title: "奥迪"
+            },
+            {
+                img: "./cars/audi.jpg",
+                title: "奥迪"
+            },
+            {
+                img: "./cars/audi.jpg",
+                title: "奥迪"
+            },
+            {
+                img: "./cars/audi.jpg",
+                title: "奥迪"
+            },
+            {
+                img: "./cars/audi.jpg",
+                title: "奥迪"
+            }
+        ]
     },
     onShow() {
         this.getTabBar().init();

pages/brandSearch/index.wxml

@@ -5,8 +5,17 @@
       <van-icon size="26px" color="#fff" name="arrow-left" style="background: #006BFF" />
       <van-search style="width: 100%;" shape="round" background="#006BFF" value="{{ value }}" placeholder="请输入品牌" />
     </view>
+    <view class="bs-tabs">
+        <scroll-view class="bs-tab-sv" scroll-x="true">
+          <view class="bs-tab-sv-item" wx:for="{{navData}}" wx:key="{{index}}">
+            <image class="userAvatar" src="{{item.img}}" />
+            <view class="bs-tab-title">{{item.title}}</view>
+          </view>
+        </scroll-view>
+      </view>
   </view>
-  <van-index-bar class="bs-bar">
+  <view class="bs-block"></view>
+  <van-index-bar class="bs-bar" sticky-offset-top="207">
     <view>
       <van-index-anchor index="A" />
       <view class="bs-item">

pages/brandSearch/index.wxss

@@ -1,5 +1,7 @@
-.container {
+.view-page {
     width: 100%;
+    color: #333333;
+    background: #fff;
 }
 .bs-top-title {
     text-align: center;
@@ -38,13 +40,49 @@
     height: 42px;
     margin-right: 15px;
   }
-  .bs-bar .van-index-bar{
-      border-top: 1px solid transparent;
-      margin-top: 120px;
+  .bs-block {
+      position: relative;
+      height: 207px;
+  }
+  .bs-bar {
+    position: relative;  
+
   }
   .bs-bar .van-index-anchor-wrapper {
     background: #F9F9F9;
   }
-  .bs-bar .van-index-anchor--active {
-      top: 120px !important;
-  }
+  .bs-bar .van-index-bar__sidebar {
+      top: 63%;
+  }
+  /*横向列表项*/
+.bs-tabs {
+    width: 100%;
+    margin-top: 0px;
+    height: 70px;
+    background: #fff;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    padding-top: 15px;
+    box-shadow: 0 -2px 3px -1px rgba(0,0,0,0.2);
+    
+}
+.bs-tab-sv {
+    width: 100%;
+    width: 100%; 
+    white-space: nowrap; 
+    display: flex;
+}
+.bs-tab-sv-item {
+    width: 20%;
+    height: 100rpx;
+    text-align: center;
+    display: inline-block;
+}
+.userAvatar{
+    width:  48px;
+    height: 40px;
+    border-radius: 4px;
+}
+.bs-tab-title{
+   font-size: 13px;
+}