README.md

@@ -4,7 +4,7 @@
 - uniapp
 - 组建库 [uview](http://www.uviewui.com/)
 ## 目录结构
-```1=
+```
 |-pages tabes 目录
 |-pageA 前期注册用页面 
 |-pageB 首页类页面

components/index/video-item/index.vue

@@ -3,7 +3,7 @@
         <image class="head">
 
         </image>
-        <view class="title">这是标题这是标题这是标题</view>
+        <view class="title" v-if="!isguanzhu">这是标题这是标题这是标题</view>
         <view class="jianjie">这是简介这是简介这是简介</view>
         <view class="user">
             <view>
@@ -91,6 +91,7 @@ export default {
         return {
 
         }
-    }
+    },
+    props:["isguanzhu"]
 }
 </script>

pageB/follow/index.vue

@@ -0,0 +1,60 @@
+<template>
+    <view class="follow">
+        <view class="sosuo">
+            <image></image>
+            <text>输入达人名称</text>
+        </view>
+        <view class="list">
+            <darenItem style="margin-top:20rpx;margin-right:23rpx" v-for="item in 50"></darenItem>
+        </view>
+    </view>
+</template>
+<style lang="scss" scoped>
+image{
+    background-color: #0f0;
+}
+.follow{
+    background-color: #ECECEC;
+    min-height: calc(100vh - var(--window-top));
+    padding: 20rpx 30rpx;
+    .sosuo{
+        width: 100%;
+        height: 60rpx;
+        border-radius: 30rpx;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        >image{
+            width: 29rpx;
+            height: 29rpx;
+        }
+        >text{
+            font-size: 24rpx;
+            color: #999;
+            margin-left: 15rpx;
+        }
+    }
+    .list{
+        display: flex;
+        flex-wrap: wrap;
+        width: calc(100% + 23rpx);
+        margin-right: -23rpx;
+    }
+}
+</style>
+<script>
+import darenItem from "@/components/index/daren-item/index" 
+
+export default {
+    name:"follow",
+    components:{
+        darenItem
+    },
+    data(){
+        return{
+
+        }
+    }
+}
+</script>

pages.json

@@ -31,6 +31,22 @@
 				}
 			]
 		},
+		{
+			"root": "pageB",
+			"pages": [
+				{
+					"path": "follow/index",
+					"style": {
+						"navigationBarTitleText": "",
+						"app-plus":{
+							"titleNView":{
+								"backgroundColor":"#ffffff"
+							}
+						}
+					}
+				}
+			]
+		},
 		{
 			"root": "pageE",
 			"pages":[
@@ -115,7 +131,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>
+                <u-tabs :is-scroll="false" bar-width="70" ref="tabs" :list="list" :current="num" :bar-style="{
-                <view>直播</view>
+                    'background-color':'#FF780F',
-                <view>关注</view>
+                    '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">
@@ -60,6 +67,14 @@
 
                             </view>
                         </view>
+                        <view class="list">
+                            <view >
+                                <videoItem isguanzhu="true" v-for="item in 10"></videoItem>
+                            </view>
+                            <view style="margin-left:20rpx">
+                                <videoItem isguanzhu="true" v-for="item in 10"></videoItem>
+                            </view>
+                        </view>
                     </view>
                     
                 </scroll-view>
@@ -85,29 +100,12 @@
         .sosuo{
             width: 32rpx;
             height: 32rpx;
+
         }
         .tabs{
-            display: flex;
+            width: 334rpx;
-            width: 294upx;
+            /deep/ .u-tab-item{
-            justify-content: space-between;
-            >view{
-                font-size: 36upx;
-                color: #333;
                 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%;
             }
         }
     }
@@ -171,7 +169,16 @@ export default {
     name:"index",
     data(){
         return {
-
+            list:[
+                {
+					name: '发现'
+				}, {
+					name: '直播'
+				}, {
+					name: '关注'
+				}
+            ],
+            num:0
         }
     },
     components:{
@@ -179,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>