uni-app开发一个小视频应用(三)

一、前情回顾

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">
            &nbsp;自动定位: 上海
        </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>