一、前情回顾
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>