uni-app开发微信小程序-首页

1.首页

1.1 tabbar

1.1.1 在pages目录下创建tabbar目录

在pages上按右键，新建目录tabbar

1.1.2 创建follow,index,my页面

在tabbar上按右键，新建页面，输入follow,选择创建同名目录，按创建。可以创建follow页面。 同理，创建index,my页面

1.1.3 在static中添加图标

1.1.4 在pages.json中加入tabbar内容

编辑pages.json 与pages在同一级

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/tabbar/index/index",
			"style": {
				// 默认的导航不方便添加搜索框，改成定制
				"navigationStyle":"custom",
				"navigationBarTextStyle":"white",
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/tabbar/follow/follow",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/tabbar/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar":{
		"color":"#666",
		"selectedColor":"#f07373",
		"backgroundColor":"#fff",
		"list":[			{
				"pagePath":"pages/tabbar/index/index",
				"iconPath":"static/home.png",
				"selectedIconPath":"static/home-active.png",
				"text":"首页"
			},
			{
				"pagePath":"pages/tabbar/follow/follow",
				"iconPath":"static/follow.png",
				"selectedIconPath":"static/follow-active.png",
				"text":"关注"
			},
			{
				"pagePath":"pages/tabbar/my/my",
				"iconPath":"static/my.png",
				"selectedIconPath":"static/my-active.png",
				"text":"我的"
			}]
	}

1.1.5 在follow.vue,index.vue,my.vue的view中加入内容

比如follow.vue

<template>
	<view>
		关注
	</view>
</template>

my.vue

<template>
	<view>
		我的
	</view>
</template>

运行可以看到tabbar的效果

1.2 创建自定义组件-导航栏

在根目录创建components目录，然后在components上按右键，新建组件navbar，选择创建同名目录，按创建。 navbar.vue的代码如下：

<template>
	<view class="navbar">
		<view class="navbar-fixed">
	<!-- 		<view style="height: 10px;"></view> -->
			<view :style="{height: statusBarHeight+'px'}"></view>
			<view class="navbar-content" :style="{height:navBarHeight+'px', width:windowWidth+'px' }">
				<view class="navbar-search">
					<view class="navbar-search_icon"></view>
					<view class="navbar-search_text">uni-app、vue</view>			
				</view>
			</view>
		</view>
		<view style="height: 45px;"></view>
	</view>
</template>

<script>
	export default {
		name:"navbar",
		data() {
			return {
				statusBarHeight: 20,
				navBarHeight: 45,
				windowWidth: 375
			};
		},
		created(){
			// 获取手机系统的信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏的高度
			this.statusBarHeight = info.statusBarHeight
			console.log(info)
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo)
			
			// (胶囊底部高度-状态栏的高度) + (胶囊顶部高度-状态栏的高度)=导航栏的高度
			let navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + 
			(menuButtonInfo.top - info.statusBarHeight)
			// console.log(navBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		}
	}
</script>

<!-- 使用sass样式（使用前要安装插件。工具-插件安装-安装sass/scss） -->
<style lang="scss">
	.navbar {
		.navbar-fixed{
			position: fixed;	
			z-index: 99;
			width: 100%;
			height: 65px;
			background-color: $mk-base-color;
			.navbar-content{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 15px;
				box-sizing: border-box;
				height: 45px;
				.navbar-search{
					display: flex; 
					align-items: center;
					padding: 0 10px;
					width: 100%;
					height: 30px;
					border-radius: 15px;
					background-color: #fff;
					.navbar-search_icon{ 
						width: 10px;
						height: 10px;
						border: 1px red solid;
						margin-right: 10px;
					}
					.navbar-search_text{
						font-size: 12px;
						color:#999;
					}
				}
			}
			
		}
	}
</style>

修改index.vue

<template>
	<view class="content">
		<navbar></navbar>
		<view v-for="item in 100" >
			{{item}}内容那个
		</view>
	</view>
</template>