uni-app开发（三）：项目实战之仿糗百首页

一、底部导航栏

首先，首页有个底部导航——tabBar，分为四个模块，故对应在pages下创建模块，pages.json文件中代码如下：

{
	"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {}
        ,{
            "path" : "pages/news/news",
            "style" : {}
        }
        ,{
            "path" : "pages/paper/paper",
            "style" : {}
        }
        ,{
            "path" : "pages/home/home",
            "style" : {}
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "仿糗事百科",
		"navigationBarBackgroundColor": "#FFFFFF",
		"backgroundColor": "#FFFFFF"
	},
 	"tabBar": {
	    "color" : "#B5B5B5",
	   	    "selectedColor" : "#FEE42B",
	   	    "borderStyle" : "black",
	   	    "backgroundColor" : "#FFFFFF",
	   	    "list" : [
	   	        {
	   				"pagePath":"pages/index/index",
	   				"text":"糗事",
	   				"iconPath":"/static/tabbar/index.png",
	   				"selectedIconPath":"/static/tabbar/indexed.png"
	   	        },
	   			{
	   				"pagePath":"pages/news/news",
	   				"text":"动态",
	   				"iconPath":"/static/tabbar/news.png",
	   				"selectedIconPath":"/static/tabbar/newsed.png"
	   			},
	   			{
	   				"pagePath":"pages/paper/paper",
	   				"text":"小纸条",
	   				"iconPath":"/static/tabbar/paper.png",
	   				"selectedIconPath":"/static/tabbar/papered.png"
	   			},
	   			{
	   				"pagePath":"pages/home/home",
	   				"text":"我的",
	   				"iconPath":"/static/tabbar/home.png",
	   				"selectedIconPath":"/static/tabbar/homeed.png"
	   			}
	   	    ]
	} 
}

然后，参照原型图对启动页设置自定义导航栏（app-plus/titleNView），中间一个搜索框(searchInput) + 两侧各一图标(buttons)，在对应page下的style中设置，代码如下：

{
			"path": "pages/index/index",
			"style": {//不显示标题==》搜索框 + 左右图标
				"app-plus":{//设置编译到 App 平台的特定样式
					"scrollIndicator":"none",//隐藏滚动条
					"titleNView":{//导航栏
						 "searchInput":{// 搜索框配置
							 "align":"center",
							 "backgroundColor":"#F7F7F7",
							 "borderRadius":"4px",
							 "placeholder":"搜索糗事",
							 "placeholderColor":"#CCCCCC",
							 "disabled":true
						 },	 
						 "buttons":[//配置按钮
							 {// 左边
								 "color":"#FF9619",
								 "colorPressed":"#BBBBBB",
								 "float":"left",
								 "fontSize":"22px",
								 "fontSrc":"/static/font/icon.ttf",
								 "text":"\ue609"
							 },
							 {// 右边
								 "color":"#000000",								 
								 "colorPressed":"#BBBBBB",
								 "float":"right",
								 "fontSize":"22px",
								 "fontSrc":"/static/font/icon.ttf",
								 "text":"\ue653"
							 }
						 ]
					}
				}
			}
		}

二、列表样式及数据展示并封装

首先，在实现界面效果时，先要对一些属性的状态有所了解。

关于 Flex容器属性
 - 决定主轴的方向  flex-direction：row | row-reverse | column | column-reverse;
 - 如果一条轴线排不下，如何换行  flex-wrap：nowrap | wrap | wrap-reverse;
 - flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap 
   flex-flow：<flex-direction> || <flex-wrap>;
 - 定义了项目在主轴上的对齐方式  justify-content：flex-start | flex-end | center |
   space-between | space-around;
 - 定义项目在交叉轴上如何对齐  align-items：flex-start | flex-end | center | baseline
   | stretch;
 - 定义了多根轴线的对齐方式  align-content：flex-start | flex-end | center |
   space-between | space-around | stretch;

Flex项目属性
order：定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex: flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
取值如 auto | flex-start | flex-end | center | baseline | stretch

根据项目需求，封装定义flex相关属性的文件common.css

/* flex布局 自定义封装*/
.u-f,.u-f-ac,.u-f-ajc{
	display: flex;
}
.u-f-ac,.u-f-ajc{
	align-items: center;
}
.u-f-ajc{
	justify-content: center;
}
.u-f-jsb{
	justify-content: space-between;
}

对应index.vue文件中添加数据，并封装对应list的布局样式

<template>
	<view> 
		<block v-for="(item,index) in list" :key="index">
			<index-list :item="item" :index="index"></index-list>
		</block>
	</view>
</template>

<script>
	import indexList from "../../components/index/index-list.vue";//引入list布局样式
	
	export default {
		components:{
					indexList
		},
		data() {
			return {
				list:[
					{
						userpic:"../../static/demo/userpic/12.jpg",
						username:"昵称",
						isguanzhu:false,
						title:"我是标题",
						type:"img", // img:图文,video:视频
						titlepic:"../../static/demo/datapic/11.jpg",
						infonum:{
							index:0,//0:没有操作，1:顶,2:踩；
							dingnum:11,
							cainum:11,
						},
						commentnum:10,
						sharenum:10,
					},
					{
						userpic:"../../static/demo/userpic/12.jpg",
						username:"昵称",
						isguanzhu:true,
						title:"我是标题",
						type:"video", // img:图文,video:视频
						titlepic:"../../static/demo/datapic/11.jpg",
						playnum:"20w",
						long:"2:47",
						infonum:{
							index:1,//0:没有操作，1:顶,2:踩；
							dingnum:11,
							cainum:11,
						},
						commentnum:10,
						sharenum:10,
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
</style>

index-list.vue文件

<template>
	<view class="index-list">
		<view class="index-list1 u-f-ac u-f-jsb">
			<view class="u-f-ac">
				<image :src="item.userpic" mode="widthFix" lazy-load></image>
				{
  {item.username}}
			</view>
			<view class="u-f-ac" v-show="item.isguanzhu">
				<view class="icon iconfont icon-zengjia"></view>关注
			</view>
		</view>
		
		<view class="index-list2">{
  {item.title}}</view>
		
		<view class="index-list3 u-f-ajc">
			<!-- 图片 -->
			<image :src="item.titlepic" mode="widthFix" lazy-load></image>
			<!-- 视频 -->
			<template v-if="item.type=='video'">
				<view class="icon iconfont icon-bofang index-list-play"></view>
				<view class="index-list-playinfo">{
  {item.playnum}}次播放 {
  {item.long}}</view>
			</template>
		</view>
		
		<view class="index-list4 u-f-ac u-f-jsb">
			<view class="u-f-ac">
				<view class="u-f-ac" :class="{'active':(item.infonum.index==1)}">
					<view class="icon iconfont icon-icon_xiaolian-mian"></view>
					{
  {item.infonum.dingnum}}
				</view>
				<view class="u-f-ac" :class="{'active':(item.infonum.i