uni-app移动应用开发（微课版）课件 项目三 uni-app页面样式与布局

项目三uni-app页面样式与布局

项目三uni-app页面样式与布局

项目任务：任务1uni-app页面样式任务2Flex布局任务3综合案例01任务1uni-app页面样式

3.1.1uni-app页面尺寸单位uni-app页面支持px和rpx两种尺寸单位。其中，px为传统的屏幕像素单位，与设备屏幕宽度无关，尺寸固定。rpx为响应式px，能够根据屏幕宽度自适应的动态调整尺寸。因此，在开发移动端项目时应尽量使用rpx作为尺寸单位。rpx以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。当App端和Web端屏幕宽度达到960px时，rpx会按照375px的屏幕宽度进行计算。rpx的由来和尺寸计算过程：界面设计师在进行页面设计过程中，一般只提供一个分辨率的设计图。如果开发人员严格按设计图标注的px尺寸做开发，就不能动态适应不同宽度的手机上界面。如果页面高度大于手机屏幕高度，可以使用纵向滚动条来弥补，页面纵向滚动也比较符合用户使用习惯。如果宽度大于手机屏幕宽度，使用横向滚动条来弥补，会造成用户使用不便，体验感非常差。因此移动端开发更关注页面宽度的动态支持。

3.1.1uni-app页面尺寸单位

rpx的概念最初来源于微信小程序，用于解决小程序页面宽度的自适应问题。目前uni-app在App端、Web端都支持rpx，并且可以配置不同屏幕宽度的计算方式，rpx是相对于设计图基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app规定屏幕基准宽度750rpx。开发者可以通过设计图基准宽度计算页面元素rpx值，页面元素宽度rpx值计算公式如下：750*元素在设计图中的宽度/设计图基准宽度例如，如果设计稿宽度为750px，元素A在设计稿上的宽度为100px，那么元素A在uni-app页面的宽度应该为750*100/750，等于100rpx。如果设计稿宽度为640px，元素A在设计稿上的宽度为100px，那么元素A在uni-app页面的宽度应该设为750*100/640，等于117rpx。

3.1.2uni-app页面样式

uni-app的页面样式分为内联样式和外联样式。其中，内联样式可以在页各组件中直接使用style、class属性定义。外联样式在外部CSS文件中定义并通过@import语句引入。

1.内联样式与Web端类似，uni-app内联样式可使用style属性和选择器两种方式定义。

（1）style属性style属性将样式定义在页面<template>标签的组件中，与具体某个组件绑定。如下代码对一个view组件设置color为red。<viewstyle="{color:red}"/>

3.1.2uni-app页面样式

（2）选择器选择器用于将样式同时作用到多个组件上。可以把样式定义在页面的<style>标签中，以一个特定的样式名称封装，使用特定的选择器匹配该样式名称到组件上。如下代码在<style>中定义了一个样式名称为.normal，内部封装了样式color:red。使用class选择器将.normal内部封装的样式同时作用在<view>和<button>组件上。<viewclass="normal"></view><buttonclass="normal"></button><style>

.normal{

color:red

}</style>

3.1.2uni-app页面样式uni-app支持的选择器选择器<style>标签中样例样例描述.class.intro选择所有拥有class="intro"的组件#id#firstname选择拥有id="firstname"的组件elementview选择所有view组件element,elementview,checkbox选择所有文档的view组件和所有的checkbox组件::afterview::after在view组件后边插入内容，仅.vue页面生效::beforeview::before在view组件前边插入内容，仅vue页面生效

3.1.2uni-app页面样式

在使用选择器时，需注意以下几点。（1）Web端常见的*选择器，在uni-app中不支持使用。（2）在微信小程序的自定义组件中仅支持使用class选择器定义样式（3）uni-app的page相当于Web端的body，用于设置整个应用的样式。注意页面<style>标签上不能使用scoped，否则样式只对当前页面生效。<style>

page{

color:#ccc;

}</style>（4）定义在App.vue中的样式为全局样式，作用于每一个页面。在pages目录下.vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。

3.1.2uni-app页面样式

2.外联样式外联样式指样式没有定义在当前页面内部<style>，而是定义在外部某个CSS文件中，需要通过@import语句导入当前页面使用。@import后跟需要导入的CSS文件相对路径，语句末尾使用分号结束。在App.vue中通过@import语句导入的外联样式也为全局样式，一样作用于每一个页面。如下代码就在某页面引入了外部CSS文件uni.css，uni.css页面定义的选择器样式都对该页面内组件生效。<style> @import"../../common/uni.css";</style>在uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

3.1.3uni-app背景图片

uni-app也支持在CSS里设置背景图片，使用方式与普通Web项目大体相同。uni-app支持本地和网络服务器两种方式加载背景图片。如果项目在小程序端运行，本地加载的图片必须使用base64格式，否则不能正常加载。在使用背景图片中需注意以下两点：1.在本地加载背景图片时，uni-app官方推荐图片路径使用以~@开头的绝对路径形式，尽量避免使用相对路径形式。因为相对路径在某些场景下不支持，例如微信小程序开发工具支持相对路径，但是项目发布到真机时，相对路径就无效了。@开头的绝对路径形式表示从项目根目录开始寻找图片文件的路径。如下代码演示了在项目的index.vue页面CSS中引入static目录下的logo.png图片，路径的相对路径和绝对路径的写法示例如下。

3.1.3uni-app背景图片

2.在开发过程中为方便开发者，当uni-app项目编译到不支持本地背景图的平台时（小程序端），如果背景图片小于40KB时，HBuilderX会自动将其转化为base64格式。因此开发中背景图片尽量不要大于40KB。如果项目中必须要使用大图片，需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。.content{ background-image:url("../../static/logo.png")/*相对路径*/ background-image:url("~@/static/logo.png");/*绝对路径*/}

3.1.4uni-app内置样式变量

为了方便整体控制应用的风格如按钮颜色、边框风格等，uni-app的全局样式文件uni.scss文件中内置了一些常用的SCSS样式变量，变量形式如下。/*行为相关颜色*/$uni-color-primary:#007aff;/*文字基本颜色*/$uni-text-color:#333;//基本色省略后续变量用户无需在代码中显示导入uni.scss文件就可以使用这些样式变量。使用时HBuilderX里面必须安装SCSS插件，同时页面的<style>标签上要加上lang="scss"。例如可使用如下代码设置页面所有View组件的文字颜色为$uni-color-primar变量值。<view></view><stylelang="scss">

view{

color:$uni-color-primary

}</style>

3.1.4uni-app内置样式变量

除此之外，uni-app也内置了三个CSS变量。<viewstyle="height:var(--status-bar-height);">11111</view>uni-app内置的CSS变量变量名描述App小程序Web--status-bar-height系统状态栏高度手机实际状态栏高度25px0--window-top内容区域距离顶部的距离00NavigationBar的高度--window-bottom内容区域距离底部的距离00TabBar的高度内置CSS变量通过var(变量名使用)。例如如下代码定义了一个高度为var(--status-bar-height)的View组件，在小程序中该View组件的高度为25px。

3.1.4uni-app内置样式变量

使用内置CSS变量时需注意以下几点。（1）var(--status-bar-height)变量在微信小程序端值为25px，在App端为手机实际状态栏高度。（2）如果用户需自定义导航栏，可通过设置pages.json文件中globalStyle内部的的"navigationStyle":"custom"来取消原生导航栏。由于窗体为沉浸式，页面内容会现在状态栏中，可以在页面顶部添加一个高度为var(--status-bar-height)的View组件解决此问题。（3）Web端是不存在原生导航栏和TabBar栏的，在Web端页面中能够看到的是uni-app在页面使用<div>模拟实现的。（4）.nvue页面在App端还不支持--status-bar-height变量，可在页面顶部设置一个View组件并通过代码<view:style="{height:StatusBarHeight+'px'}"></view>绑定一个响应式变量StatusBarHeight设置高度。在页面加载执行onLoad函数时，通过uni.getSystemInfoSync().statusBarHeight方法获取状态栏高度，并赋值给响应式变量。02任务2Flex布局

3.2.1Flex布局简介

为支持跨平台，uni-app建议页面布局使用Flex布局。Flex布局也称为弹性布局，是CSS3中引入的一种新的布局模式。传统布局基于模式盒状模型实现，布局依赖display属性、position属性和float属性实现，布局代码过于冗余复杂。Flex布局基于容器实现，提供了一种更为简单、灵活的方式来处理盒状模型，尤其适用于多端场景下页面尺寸多变的场景。Flex是FlexibleBox的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。Flex布局将页面元素看成容器，通过给父容器添加flex属性，来控制内部子容器的位置和排列方式。任何一个容器都可以指定为Flex布局，一旦父容器设置为Flex布局后，子容器的float、clear和vertical-align属性将会失效。如下代码就指定了所有class=“box”的页面元素内部使用Flex布局。.box{

dispaly:flex;}

3.2.1Flex布局简介

行内元素也可以使用Flex布局。如下代码就指定了class=“box”的所有行内元素内部使用Flex布局。.box{display:inline-flex;}Safari等一些Webkit内核的浏览器要使用Flex布局，必须加上-webkit前缀。.box{

display:-webkit-flex;

/*Safari浏览器*/

display:flex;}

3.2.1Flex布局简介

页面中采用Flex布局的元素称为Flex容器，元素所有子元素自动成为容器成员，称为Flex项目。Flex容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis）。主轴的开始位置（与边框的交叉点）叫做mainstart，结束位置叫做mainend；交叉轴的开始位置叫做crossstart，结束位置叫做crossend。容器内部Flex项目默认沿主轴排列。单个项目占据的水平主轴空间叫做mainsize，占据的垂直交叉轴空间叫做crosssize。

3.2.2Flex容器属性

Flex容器通过flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content这6个属性来设置项目的布局。

1.flex-direction属性flex-direction属性用于设置主轴的方向，即项目的排列方向。flex-direction属性使用示例如下。.box{

display:flex;

flex-direction:row|row-reverse|column|column-reverse;}flex-direction属性有4个值。（1）row：主轴为水平方向，起点在左端，row是flex-direction的默认值。（2）row-reverse：主轴为水平方向，起点在右端。（3）column：主轴为垂直方向，起点在上沿。（4）column-reverse：主轴为垂直方向，起点在下沿。

3.2.2Flex容器属性

flex-direction演示效果代码如下。<template> <view:class="viewStyle"style="border:solid2rpx;width:300rpx;"> <text>1</text> <text>2</text> <text>3</text> </view> <buttonsize="mini"@click="change('row')">row</button> <buttonsize="mini"@click="change('row-reverse')">row-reverse</button> <buttonsize="mini"@click="change('column')">column</button> <buttonsize="mini"@click="change('column-reverse')">column-reverse</button> <view>单击{{viewStyle}}按钮</view></template><scriptsetup> import{ref}from'vue'; letviewStyle=ref("row") functionchange(style){ viewStyle.value=style }</script>//剩余代码见下一页

3.2.2Flex容器属性<stylescoped> .row{ display:flex; flex-direction:row; } .row-reverse{ display:flex; flex-direction:row-reverse; } .column{ display:flex; flex-direction:column; } .column-reverse{ display:flex; flex-direction:column-reverse; }</style>

3.2.2Flex容器属性启动项目，依次分别单击“row”、“rowreverse”、“column”、“columnreverse”4个按钮，<text>子容器1、2、3排列顺序如下。

3.2.2Flex容器属性

2.flex-wrap属性

默认情况下Flex容器内项目都排在一条轴线上，如果一条轴线排不下，就需要分开排列。flex-wrap属性用于设置项目分开排列的规则，一般结合flex-direction属性使用，对横向（纵向）排列的项目换行（列）显示。flex-wrap属性使用示例如下。.box{

display:flex;

flex-wrap:nowrap|wrap|wrap-reverse;}

flex-wrap属性有3个值。（1）nowrap：nowrap是flex-wrap默认值。主轴为横向，项目不换行显示。主轴为纵向向，项目不换列显示。（2）wrap：主轴为横向时，项目从上到下换行显示。主轴为纵向时，项目从左到右换列显示。（3）wrap-reverse：主轴为横向时，项目从下到上换行。主轴为纵向时，项目从右到左换列。

3.2.2Flex容器属性

flex-wrap演示效果代码如下。<template>

<view:style="viewStyle">

<textstyle="width:100rpx;height:100rpx">1</text>

<textstyle="width:100rpx;height:100rpx">2</text>

<textstyle="width:100rpx;height:100rpx">3</text>

<textstyle="width:100rpx;height:100rpx">4</text>

</view>

<buttonsize="mini"@click="change('row','nowrap')">主轴横向nowrap</button>

<buttonsize="mini"@click="change('row','wrap')">主轴横向wrap</button>

<buttonsize="mini"@click="change('row','wrap-reverse')">主轴横向wrap-reverse</button>

<buttonsize="mini"@click="change('column','nowrap')">主轴纵向nowrap</button>

<buttonsize="mini"@click="change('column','wrap')">主轴纵向wrap</button>

<buttonsize="mini"@click="change('column','wrap-reverse')">

主轴纵向wrap-reverse</button>

<view>{{'flex-direction:'+viewStyle['flex-direction']}}</view>

<view>{{'flex-wrap:'+viewStyle['flex-wrap']}}</view></template><!--剩余代码见下一页-->

3.2.2Flex容器属性<scriptsetup>

import{reactive}from'vue';

letviewStyle=reactive({

'display':'flex',

'border':'solid2rpx',

'width':'200rpx',

'height':'200rpx',

'flex-direction':'row',

'flex-wrap':'nowrap'

})

functionchange(direction,wrap){

viewStyle['flex-direction']=direction

viewStyle['flex-wrap']=wrap

}</script><style></style>

3.2.2Flex容器属性

启动项目，依次分别单击“nowrap”、“主轴横向wrap”、“主轴纵向wrap”、“主轴横向wrap-reverse”、“主轴纵向wrap-reverse”5个按钮，<text>子容器1、2、3、4排列顺序如下。

3.2.2Flex容器属性

3.flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，用于简化Flex布局代码。flex-flow默认值为rownowrap，使用示例如下。.box{

flex-flow:<flex-direction>||<flex-wrap>;}4.justify-content属性justify-content属性定义了项目在主轴上的对齐方式。justify-content属性使用示例如下。.box{

justify-content:flex-start|flex-end|center|space-between|space-around;}

3.2.1Flex布局简介

justify-content属性有5个值，具体对齐方式与轴的方向有关，假设主轴为从左到右。（1）flex-start：项目与主轴的起点对齐，即左对齐，是justify-content的默认值。（2）flex-end：项目与主轴的终点对齐，即右对齐。（3）center：项目与主轴的中点对齐，即居中对齐。（4）space-between：项目两端对齐主轴的起点与终点，项目之间的间隔都相等，即两端对齐。（5）space-around：每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。

justify-content演示效果代码如下。

3.2.2Flex容器属性<template> <view:style="viewStyle"> <text>1</text> <text>2</text> <text>3</text> </view> <buttonsize="mini"@click="change('flex-start')">flex-start</button> <buttonsize="mini"@click="change('flex-end')">flex-end</button> <buttonsize="mini"@click="change('center')">center</button> <buttonsize="mini"@click="change('space-between')">space-between</button> <buttonsize="mini"@click="change('space-around')">space-around</button> <view>{{'justify-content:'+viewStyle['justify-content']}}</view></template><scriptsetup> import{reactive}from'vue'; letviewStyle=reactive({ 'display':'flex', 'width':'200rpx', 'border':'solid2rpx', 'justify-content':'flex-start' }) functionchange(justify){ viewStyle['justify-content']=justify }</script><style></style>

3.2.2Flex容器属性

启动项目，依次分别单击“flex-start”、“flex-end”、“center”、“space-between”、“space-around”5个按钮，<text>子容器1、2、3排列顺序如下。

3.2.2Flex容器属性

5.align-items属性

align-items属性定义项目在交叉轴上如何对齐。纵向交叉轴方向始终自上而下，横向交叉轴方向始终自左而右。align-items属性使用示例如下。.box{

align-items:flex-start|flex-end|center|baseline|stretch;}

align-items有5个值。具体的对齐方式与交叉轴的方向有关，假设交叉轴从上到下。（1）flex-start：项目在交叉轴的起点对齐。（2）flex-end：项目在交叉轴的终点对齐。（3）center：项目在交叉轴的中点对齐。（4）baseline：项目的第一行文字的基线对齐。（5）stretch：是align-items属性默认值。项目占满整个容器的高度对齐，在项目未设置高度或设为auto时生效。

3.2.2Flex容器属性

align-items演示效果代码如下。<template> <viewclass="view-class"> <textclass="text-class1">1</text> <textclass="text-class2">2</text> <textclass="text-class3">3</text> </view> <buttonsize="mini"@click="change('flex-start')">flex-start</button> <buttonsize="mini"@click="change('flex-end')">flex-end</button> <buttonsize="mini"@click="change('center')">center</button> <buttonsize="mini"@click="change('baseline')">baseline</button> <buttonsize="mini"@click="change('stretch')">stretch</button> <view>{{"align-items:"+alignItems}}</view></template><scriptsetup> import{ref,reactive}from'vue'; letalignItems=ref('flex-start')//设置初始align-items值为flex-start letmarginTop=ref('0rpx')//该变量在alignItems值为baseline使用

lettextHeight=reactive({//设置三个text子组件的高度初始值

height1:'60rpx', height2:'80rpx', height3:'100rpx', })//剩余代码见下一页

3.2.2Flex容器属性 functionchange(param){ //值为baseline，设置第一个text子组件margin-top为20rpx if(param=='baseline'){ marginTop.value='20rpx' }else{ //还原第一个text子组件margin-top为0rpx marginTop.value='0rpx' //值为stretch，将三个text子组件高度设置为auto if(param=='stretch'){ textHeight.height1="auto" textHeight.height2="auto" textHeight.height3="auto" } } alignItems.value=param }</script><!--剩余代码见下一页-->

3.2.2Flex容器属性<stylescoped>.view-class{ display:flex; width:100%; height:120rpx; border:solid2rpx; /*v-bind动态绑定alignItems值作为view组件的CSS样式*/ align-items:v-bind('alignItems')}.text-class1{ margin-top:v-bind('marginTop'); width:100rpx; /*v-bind动态绑定textHeight.height1值作为text子组件的CSS样式*/ height:v-bind('textHeight.height1'); border:solid2rpx}.text-class2{ width:100rpx; /*v-bind动态绑定textHeight.height2值作为text子组件的CSS样式*/ height:v-bind('textHeight.height2'); border:solid2rpx}/*剩余代码见下一页*/

3.2.2Flex容器属性.text-class3{ width:100rpx; /*v-bind动态绑定textHeight.height3值作为text子组件的CSS样式*/ height:v-bind('textHeight.height3'); border:solid2rpx}</style>

启动项目，依次分别单击“flex-start”、“flex-end”、“center”、“baseline”、“stretch”5个按钮，<text>子容器1、2、3排列顺序如下。

3.2.2Flex容器属性

6.align-content属性

align-content属性定义了多根轴线（多行或多列）情况下项目的对齐方式。如果项目只有一根轴线（一行或一列），该属性不起作用。align-content使用示例如下，一般容器会设置flex-wrap:wrap;让项目自动换行显示以形成多行或多列布局，以便使用align-content属性。.box{display:flex;flex-wrap:wrap;

/*一般会设置自动换行*/align-content:flex-start|flex-end|center|space-between|space-around|stretch;}

3.2.2Flex容器属性

align-content属性可能取6个值。假设项目有多行。（1）flex-start：项目与垂直轴的起点对齐，所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。（2）flex-end：项目与垂直轴的终点对齐，所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。从下往上所有后续行与前一个对齐。（3）center：项目与垂直轴的中点对齐，所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。（4）space-between：项目与交叉轴的两端对齐，第一行项目与最后一行项目与容器顶部和底部边框紧贴，行之间的间隔平均分布。（5）space-around：每行与容器顶部和底部边框的间隔都相等。所以，行之间的间隔比行与边框的间隔大一倍。（6）stretch：align-content属性的默认值。多行元素的高度自动拉伸，平分容器的高度。在项目未设置高度或设为auto时生效。

3.2.2Flex容器属性align-content演示效果代码如下。<template>

<viewclass="view-class">

<textclass="text-class">1</text>

<textclass="text-class">2</text>

<textclass="text-class">3</text>

<textclass="text-class">4</text>

<textclass="text-class">5</text>

<textclass="text-class">6</text>

</view>

<buttonsize="mini"@click="change('flex-start')">flex-start</button>

<buttonsize="mini"@click="change('flex-end')">flex-end</button>

<buttonsize="mini"@click="change('center')">center</button>

<buttonsize="mini"@click="change('space-between')">space-between</button>

<buttonsize="mini"@click="change('space-around')">space-around</button>

<buttonsize="mini"@click="change('stretch')">stretch</button>

<view>{{"align-content:"+alignContent}}</view></template><!--剩余代码见下一页-->

3.2.2Flex容器属性<scriptsetup>

import{ref,reactive}from'vue';

letalignContent=ref('flex-start')//设置初始align-content值为flex-start

lettextHeight=ref("100rpx")

functionchange(param){

//值为stretch，将text子组件高度设置为auto

if(param=='stretch'){

textHeight.value="auto"

}else{

textHeight.value="100rpx"

}

alignContent.value=param

}</script><!--剩余代码见下一页-->

3.2.2Flex容器属性<stylescoped>.view-class{ display:flex; flex-wrap:wrap;/*使用align-content属性需配置flex-wrap自动换行*/ margin:0auto;/*设置view居中*/ /*v-bind动态绑定alignContent值作为view组件的CSS样式*/ align-content:v-bind('alignContent'); width:350rpx; height:350rpx; border:solid2rpx;}.text-class{ width:100rpx; /*v-bind动态绑定textHeight值作为view组件的CSS样式*/ height:v-bind('textHeight'); border:solid2rpx}</style>

3.2.2Flex容器属性

启动项目，依次分别单击“flex-start”、“flex-end”、“center”、“space-between”、“space-around”、“stretch”6个按钮，<text>子容器1、2、3、4、5、6排列顺序如下。

3.2.3Flex项目属性

除了容器属性外，Flex还提供了6个项目属性用于项目布局设置。这6个项目属性分别是order、flex-grow、flex-shrink、flex-basis、flex、align-self。

1.order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。order属性使用示例如下。.item{order:<integer>;}

order属性演示效果代码如下。<template> <viewstyle="display:flex;height:50rpx;width:150rpx;border:solid2rpx;"> <textstyle="width:50rpx;height:50rpx;border:solid2rpx;order:3;">1</text> <textstyle="width:50rpx;height:50rpx;border:solid2rpx;order:2;">2</text> <textstyle="width:50rpx;height:50rpx;border:solid2rpx;order:1;">3</text> </view></template><scriptsetup></script><style></style>

3.2.3Flex项目属性

2.flex-grow

flex-grow属性定义项目在主轴方向上的放大比例。flex-grow默认值为0，表示即使存在剩余空间也不放大项目。flex-grow值越大放大比例越大。flex-grow属性使用示例如下。.item{flex-grow:<number>;/*default0*/}

flex-grow属性演示效果代码如下。<template> <viewstyle="display:flex;height:100rpx;width:250rpx;border:solid2rpx;"> <!--view中剩余宽度空间分三份，第一个text放大占2份， 第二个text放大占1份，第三个text3不放大--> <textstyle="border:solid2rpx;flex-grow:2;">1</text> <textstyle="border:solid2rpx;flex-grow:1;">2</text> <textstyle="border:solid2rpx;flex-grow:0;">3</text> </view></template><scriptsetup></script><style></style>

3.2.3Flex项目属性

3.flex-shrink

flex-shrink属性定义了项目在主轴方向上的缩小比例，默认值为1，表示如果空间不足，该项目将缩小。flex-shrink值越大缩小比例越大，负值对该属性无效。如果flex-shrink值为0，表示该项目不收缩。flex-shrink使用示例如下。.item{flex-shrink:<number>;/*default1*/}

flex-shrink属性演示效果代码如下。<template> <viewstyle="display:flex;height:100rpx;width:200rpx;border:solid2rpx;"> <!--设置view宽度不足，第一个text缩小比例最大，第二个text其次，第三个text不缩小--> <textstyle="width:100rpx;border:solid2rpx;flex-shrink:2;">1</text> <textstyle="width:100rpx;border:solid2rpx;flex-shrink:1;">2</text> <textstyle="width:100rpx;border:solid2rpx;flex-shrink:0;">3</text> </view></template><scriptsetup></script><style></style>

3.2.3Flex项目属性

4.flex-basis

flex-basis属性指定了项目在主轴方向上的大小。flex-basis默认值为auto，即项目的本来大小。flex-basis使用示例如下。如果项目设置了flex-basis的值并且flex-shrink:0，width将无效。.item{flex-basis:<length>|auto;/*defaultauto*/}

flex-basis属性演示效果代码如下。<template> <viewstyle="display:flex;height:100rpx;width:200rpx;border:solid2rpx;"> <!--设置第一个text横向占位最大，第二个text其次，第三个text3最小--> <textstyle="width:100rpx;border:solid2rpx;flex-basis:200rpx;">1</text> <textstyle="width:100rpx;border:solid2rpx;flex-basis:auto;">2</text> <textstyle="width:100rpx;border:solid2rpx;flex-basis:50rpx;">3</text> </view></template><scriptsetup></script><style></style>

3.2.3Flex项目属性

5.flex

flex属性是flex-grow，flex-shrink和flex-basis的组合简写形式。其中，flex-grow属性必填，flex-shrink和flex-basis属性可选。flex属性使用示例如下。.item{flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}

flex属性默认值为01auto。该属性有两个快捷值auto和none。其中，auto代表11auto，none代表00auto。在项目布局时建议优先使用flex属性，而不是单独写flex-grow，flex-shrink和flex-basis三个属性，浏览器会根据flex自动推算出flex-grow，flex-shrink和flex-basis三个属性的值。

3.2.3Flex项目属性

flex属性演示效果代码如下。<template> <viewstyle="display:flex;height:100rpx;width:200rpx;border:solid2rpx;"> <!--设置第一个text缩小，第二个text和第三个text3不变--> <textstyle="width:100rpx;border:solid2rpx;flex:01auto">1</text> <textstyle="width:100rpx;border:solid2rpx;flex:00auto">2</text> <textstyle="width:100rpx;border:solid2rpx;flex:none">3</text> </view></template><scriptsetup></script><style></style>

3.2.3Flex项目属性

6.align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式。可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则值等于strech。align-self属性有6个值，除了auto外其他取值与align-items属性完全一致。.item{

align-self:auto|flex-start|flex-end|center|baseline|stretch;}

3.2.3Flex项目属性align-self属性演示效果代码如下。<template> <viewstyle="display:flex;height:100rpx;width:200rpx;border:solid2rpx;"> <!--设置第一个text和第二个text为flex-start，第三个text3单独为flex-end--> <textstyle="width:100rpx;border:solid2rpx;align-items:flex-start;">1</text> <textstyle="width:100rpx;border:solid2rpx;align-items:flex-start;">2</text> <textstyle="width:100rpx;border:solid2rpx;align-self:flex-end;">3</text> </view></template><scriptsetup></script><style></style>03任务3综合案例

2.4.1案例任务任务内容：在uni-app项目中自主布局实现一个类似于苹果手机的计算器页面，页面效果如下。

2.4.2任务分析

此任务涉及uni-app的页面样式和Flex布局相关知识的综合应用。任务实现关键步骤如下。

1.设置计算器整个页面背景色为黑色。注意需要在App.vue中添加样式page{height:100%;width:100%;}，否则背景色不能占满整个屏幕。

2.计算器整个页面分为上下两部分，上部分用于显示数字，下部分为按钮。上下两部分可使用如下Flex样式代码纵向布局。{display:flex;flex-direction:column;}

3.经观察页面上部分数字0的显示位置在右下角，可使用如下Flex样式代码确定位置。{justify-content:flex-end;align-items:flex-end;}

4.页面下部分按钮为5行4列布局，可使用如下Flex样式代码布局。{ display:flex; flex-wrap:wrap; justify-content:space-around;}

5.对于“0”按钮特殊处理，设置两倍宽度。

2.4.3任务实施

在App.vue中添加样式代码page{height:100%;width:100%;}，保证计算器页面背景色占满整个屏幕。

在uniappdemo3的page/calculator目录下创建计算器页面calculator.vue。在其中输入如下代码定义页面上下两部分。上下部分纵向排列，高度分别为30%和70%。<template> <viewclass="calculator"> <!--页面上部分显示数字，高度占整个页面的30%--> <viewclass="result"> </view> <!--页面下部分显示计算器按钮，高度占整个页面的70%--> <viewclass="btns"> </view> </view></template><scriptsetup></script><!--剩余代码见下一页-->

2.4.3任务实施<stylescopedlang="scss"> .calculator{ height:100%; padding-left:30rpx;/*设置计算器距页面左边距*/ padding-right:30rpx;/*设置计算器距页面右边距*/ background-color:black; display:flex; flex-direction:column; .result{ width:100%; height:30%; } .btns{ width:100%; height:70%; } }</style>

2.4.3任务实施

在<viewclass="result">内部添加一个input输入框，设置justify-content和align-items属性使输入框位于上部分页面右下角，在此基础上添加其他相关CSS样式。<template> <viewclass="calculator"> <!--页面上部分显示数字，高度占整个页面的30%--> <viewclass="result"> <inputclass="input"type="text"disabled="true"value="0"/> </view> <!--页面下部分显示计算器按钮，高度占整个页面的70%--> <viewclass="btns"> </view> </view></template><scriptsetup></script><stylescopedlang="scss"> .calculator{ height:100%; padding-left:30rpx;/*设置计算器距页面左边距*/ padding-right:30rpx;/*设置计算器距页面右边距*/ background-color:black;

/*剩余代码见下一页*/

2.4.3任务实施 display:flex; flex-direction:column; .result{ width:100%; height:30%; .result{ width:100%; height:30%; display:flex; justify-content:flex-end; align-items:flex-end; .input{

/*输入框样式*/ font-size:180rpx; color:white; height:50%; text-align:right; } } .btns{ width:100%; height:70%; }