一、前情回顾
uni-app 开发一个小视频应用(一)
uni-app 开发一个小视频应用(二)
二、创建城市页面
首页导航栏上有一个城市选择页面，点击会切换到城市页面，切换到城市页面的过程中并没有路由的跳转，而只是 tab 的切换，所以 需要将城市页面设置为 tabBar 页面，即将城市页面添加到 tabBar 的 list 数组中。
// components/city/city.vue
<template>
<view class="city"> <!-- 城市页面和首页是共用一个导航的 tabBar 的 -->
<index-header></index-header>
<tab-bar></tab-bar>
</view>
</template>
<style scoped>
.city { <!-- 城市页面全屏显示，并且背景为黑色 -->
width: 100%;
height: 100%;
background: #000000;
}
</style>三、创建位置组件
城市页面中需要显示当前所在城市定位信息以及城市切换按钮，即分为左右两部分，这里有一个问题，就是将位置组件加到城市页面中后，由于头部导航采用固定定位脱离文档流了，而位置组件需要放到头部导航栏的下发，所以 需要给位置组件设置一个 margin-top，但是由于 其父元素即城市页面没有设置边框 ，会有 外边距溢出 的问题，即 位置组件设置的外边距会转移到城市页面上 ，导致 整个城市页面会有一个 margin-top，要解决这个问题有多种方式，主要就是对父元素 (城市页面) 进行设置: 第一种就是给父元素加一个边框，这种会改变父元素布局，显然不合适，第二种是给父元素添加 over-flow:hidden; 对溢出部分进行隐藏，第三种是通过 css 为类在父元素中添加一个 table 元素，如:
// components/location.vue
<template>
<view class="location">
<view class="iconfont icon-dingwei location-left">
自动定位: 上海
</view>
<view class="location-right">
切换 <text class="iconfont icon-dayuhao dayuhao"></text>
</view>
</view>
</template>
<style>
.location {
width: 100%;
height: 40px;
color: #aaaaaa;
margin-top: 60px;
overflow: hidden;
display: flex;
}
.location-left {
text-align: center;
margin-left: 20px;
height: 40px;
line-height: 40px;
font-size: 12px;
}
.location-right {
flex: 1;
text-align: right;
padding-right: 20px;
height: 40px;
line-height: 40px;
font-size: 12px;
}
.dayuhao {font-size: 12px;}
</style>// pages/city/city.vue
<style scoped>
.city {
width: 100%;
height: 100%;
background: #000000;
/* overflow: hidden; */ <!-- 解决外边距溢出问题，对溢出部分进行隐藏 -->
/* border: 1px solid red; */ <!-- 解决外边距溢出问题，会改变父元素布局，不宜使用 -->
}
.city:before { <!-- 通过 css 伪类给城市页面顶部添加一个 table 元素，解决外边距溢出问题 -->
display: table;
content: "";
}
</style>四、在城市页面添加上视频列表
城市页面的视频列表相对简单，就是一个个的 video 大小为 50% 并且进行左浮动即可每行显示两个。
<template>
<view class="video-list">
<view class="item">
<view class="video">
<video src="http://alimov2.a.yximgs.com/bs2/gdtPostRoll/postRoll-MTA3MDY0NDY3Mzk.mp4"></video>
</view>
<view class="img">
<image class="img-box" src="../../static/zxh.jpg"></image>
</view>
</view>
</view>
</template>
<style scoped>
.video-list {
width: 100%;
overflow: auto;
background: #000000;
}
.item {
width: 50%;
height: 264px;
float: left;
position: relative;
}
.video {
width: 92%;
height: 100%;
margin-left: 4%;
background: red;
}
video {
width: 100%;
height: 100%;
}
.img {
position: absolute;
bottom: 0px;
right: 8px;
}
.img-box {
width: 20px;
height: 20px;
border-radius: 50%;
}
</style>
城市页面效果图如下:
五、顶部和底部固定高度，中间自适应高度布局
在应用程序中，我们顶部导航栏和底部导航栏通常都是固定高度的，而 中间内容是自适应的，根据不同屏幕尺寸进行自适应。要实现这种布局，主要有两种方式:
① 通过绝对定位
顶部导航栏设定固定高度，并通过 绝对定位 固定在屏幕顶部位置，同样底部导航栏设定高度，也是通过 绝对定位 固定在屏幕底部位置，而中间内容区则不固定高度，而是通过 绝对定位 ， 同时设定 top 和 bottom，top 值为顶部导航栏高度，bottom 值为底部导航栏高度，如:
<template>
<view class="index">
<view class="index-header"></view>
<view class="index-content"></view>
<view class="index-footer"></view>
</view>
</template>
<style scoped>
.index {
width: 100%;
height: 100%;
}
.index-header {
width: 100%;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
.index-content {
width: 100%;
position: absolute;
top: 50px;
bottom: 50px;
}
.index-footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
</style>②通过 flex 布局
给父元素设置 flex 布局，顶部导航栏和底部导航栏设置固定高度，中间内容设置 flex:1 自动占满剩余空间
<template>
<view class="index">
<view class="index-header"></view>
<view class="index-content"></view>
<view class="index-footer"></view>
</view>
</template>
<style scoped>
.index {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.index-header {
width: 100%;
height: 50px;
}
.index-content {
width: 100%;
flex: 1;
}
.index-footer {
width: 100%;
height: 50px;
}
<style>