首页完成

pages.json

@@ -115,7 +115,8 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "首页",
+				"navigationStyle": "custom"
 			}
 		}
 	],

pages/index/index.vue

@@ -3,13 +3,20 @@
         <view class="top">
             <view class="sosuo"></view>
             <view class="tabs">
-                <view class="xuanzhong ">发现</view>
-                <view>直播</view>
-                <view>关注</view>
+                <u-tabs :is-scroll="false" bar-width="70" ref="tabs" :list="list" :current="num" :bar-style="{
+                    'background-color':'#FF780F',
+                    'bottom':'10rpx'
+                }"
+                inactive-color="#333"
+                :active-item-style="{
+                    'color':'#333'
+                }"
+                :bold="false"
+                @change="dianji"></u-tabs>
             </view>
             <view class="sosuo"></view>
         </view>
-        <swiper class="card">
+        <swiper class="card" @change="dianji" :current="num">
             <swiper-item>
                 <scroll-view style="width:100%;height:100%" scroll-y="true">
                     <view class="box">
@@ -93,29 +100,12 @@
         .sosuo{
             width: 32rpx;
             height: 32rpx;
+
         }
         .tabs{
-            display: flex;
-            width: 294upx;
-            justify-content: space-between;
-            >view{
-                font-size: 36upx;
-                color: #333;
+            width: 334rpx;
+            /deep/ .u-tab-item{
                 font-weight: bold;
-                position: relative;
-            }
-            >view::before{
-                content: "";
-                display: block;
-                position: absolute;
-                background-color: #FF780F;
-                width: 0;
-                height: 4rpx;
-                bottom: -10rpx;
-                left: 25%;
-            }
-            .xuanzhong::before{
-                width: 50%;
             }
         }
     }
@@ -179,7 +169,16 @@ export default {
     name:"index",
     data(){
         return {
-
+            list:[
+                {
+					name: '发现'
+				}, {
+					name: '直播'
+				}, {
+					name: '关注'
+				}
+            ],
+            num:0
         }
     },
     components:{
@@ -187,6 +186,16 @@ export default {
         zhiboItem,
         indexad,
         darenItem
+    },
+    methods:{
+        dianji(a){
+            console.log(a)
+            if(typeof a == "object"){
+                this.num = a.detail.current
+            }else{
+                this.num = a
+            }
+        }
     }
 }
 </script>