自定义Flex的loading启动加载画面

android应用的loading加载动画制作(启动跳转画面)加载界面只需要一张logo，颜色渐深，三秒显示后跳入下一个activity，同时去掉标题栏与状态栏。

代码如下：AppLoadingActivity.java中public class AppLoadingActivity extends Activity {/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);// 取消标题栏(也可以在manifest里面配置)// this.requestWindowFeature(Window.FEATURE_NO_TITLE);// 取消状态栏this.getWindow().setFlags(youtParams.FLAG_FULLS CREEN,youtParams.FLAG_FULLSCREEN);setContentView(yout.app_loading);// 三秒钟之后进入loginImageView loadingIv = (ImageView) this.findViewById(R.id.logo_bg);// 从浅到深,从百分之10到百分之百AlphaAnimation animation = new AlphaAnimation(0.1f, 1.0f);animation.setDuration(3000);loadingIv.setAnimation(animation);// 给animation设置监听器animation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {// TODO Auto-generated method stub}@Overridepublic void onAnimationRepeat(Animation animation) {// TODO Auto-generated method stub}@Overridepublic void onAnimationEnd(Animation animation) {// TODO Auto-generated method stub// 三秒之后跳出Intent it = new Intent(AppLoadingActivity.this, MainActivity.class);startActivity(it);// 三秒之后这个窗口就没用了应该finishfinish();}});}}app_loading.xml:<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><ImageViewandroid:id="@+id/logo_bg"android:background="@drawable/app_loading"android:layout_width="fill_parent"android:layout_height="fill_parent"/></LinearLayout>AppLoadingManifest.xml:<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="/apk/res/android"package="com.android.aming.apploading"android:versionCode="1"android:versionName="1.0"><uses-sdk android:minSdkVersion="7" /><application android:icon="@drawable/icon"android:label="@string/app_name"//这个属性可以消除加载应用中间的黑屏android:theme="@android:style/Theme.Translucent"><activity android:name=".AppLoadingActivity"android:label="@string/app_name"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="UNCHER" /> </intent-filter></activity><activity android:name=".MainActivity"></activity></application></manifest>。

想起当年学flash的时候，最先学的就是做loading ，哈哈，成天做loading，那几行代码和那几个步骤全都背下来了。

自从来到了高级的Flex时代，loading全都自动生成了真是方便，但天天看Flex的Loading画面难免会有点审美疲劳，所以花了点时间研究了一下怎么自己画Flex的loading画面。

点此演示时间关系，我只简单的画了一下，这里是fla ，其实你想怎么画都可以主要代码：自定义的Preloader：package{import flash.display.MovieClip;import flash.display.Sprite;import flash.events.Event;import flash.events.ProgressEvent;import mx.events.FlexEvent;import mx.preloaders.IPreloaderDisplay;import mx.preloaders.Preloader;public class nPreloader extends Sprite implements IPreloaderDisplay{[Embed(source="mc.swf", symbol="loader_mc")]private var LoaderMC:Class;private var _loader_mc:MovieClipprivate var _preloader:Preloader;public function nPreloader(){super();this._loader_mc = new LoaderMC()this.addChild(this._loader_mc);this._loader_mc.gotoAndStop(50)}public function get backgroundAlpha():Number{return 0;public function set backgroundAlpha(value:Number):void{}public function get backgroundColor():uint{return 0;}public function set backgroundColor(value:uint):void{}public function get backgroundImage():Object{return null;}public function set backgroundImage(value:Object):void{}public function get backgroundSize():String{return null;}public function set backgroundSize(value:String):void{}public function set preloader(obj:Sprite):void{_preloader = obj as Preloader;_preloader.addEventListener(ProgressEvent.PROGRESS, progressEventHandler); _preloader.addEventListener(FlexEvent.INIT_COMPLETE,initCompleteEventHandle r);}public function get stageHeight():Number{return 0;public function set stageHeight(value:Number):void{}public function get stageWidth():Number{return 0;}public function set stageWidth(value:Number):void{}public function initialize():void{_loader_mc.x = stage.stageWidth / 2 - _loader_mc.width/2;_loader_mc.y = stage.stageHeight / 2 - _loader_mc.height/2;}private function progressEventHandler(eo:ProgressEvent):void {_loader_mc.gotoAndStop(Math.round((eo.bytesLoaded /eo.bytesTotal )*100))_loader_mc.show_txt.text =Math.round((eo.bytesLoaded /eo.bytesTotal )*100)+" %"}private function initCompleteEventHandler(eo:FlexEvent):void{ dispatchEvent(new Event(PLETE));}}}主文件：<?xml version="1.0" encoding="utf-8"?><mx:Application preloader="nPreloader" creationComplete="init()" layout="vertical" xmlns:mx="" ><mx:Script><![CDATA[[Embed(source="1.mp3")]private var _;]]></mx:Script><mx:Button label="Button"/><mx:ComboBox ></mx:ComboBox><mx:Panel width="250" height="200" layout="absolute"> <mx:Label text="我们是Flex组件，hoho" fontSize="15"/> </mx:Panel></mx:Application>在Flex 中设置进度条(ProgressBar)完成时效果的例子[ 2008-03-17 02:18:48 | 发布: N神 ]字体大小: 大 | 中 | 小下面的实例演示了如何设置进度条（ProgressBar）完成（100%）时的效果效果演示：点这里显示/隐藏媒体doc/flex/ProgressBar_effects/main.swf完整代码：<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical"verticalAlign="middle"backgroundColor="white"><mx:Script><![CDATA[private var timer:Timer;private function init():void {timer = new Timer(10);timer.addEventListener(TimerEvent.TIMER, timer_timer);}private function timer_timer(evt:TimerEvent):void {progressBar.setProgress(progressBar.value + 1, 100);}private function progressBar_complete(evt:Event):void {timer.stop();}private function resetProgressBar():void {progressBar.setProgress(0, 100);progressBar.scaleX = 1.0; // 100%progressBar.scaleY = 1.0; // 100%progressBar.alpha = 1.0; // 100%}private function playProgressBar():void {resetProgressBar();timer.start();}]]></mx:Script><mx:Parallel id="progressBar_completeEffect"> <mx:Fade alphaTo="0.0" /><mx:Zoom zoomHeightTo="0" /></mx:Parallel><mx:ApplicationControlBar dock="true"><mx:Button label="Play"click="playProgressBar();" /><mx:Button label="Reset"click="resetProgressBar();" /></mx:ApplicationControlBar><mx:ProgressBar id="progressBar"complete="progressBar_complete(event);"completeEffect="{progressBar_completeEffect}" mode="manual"labelPlacement="center"width="80%"height="60%"creationComplete="init();" /></mx:Application>Flex 中在表单(Form组件)上填加动画效果(Effect)[ 2008-03-13 00:57:14 | 发布: N神 ]字体大小: 大 | 中 | 小下面的实例中，有一个表格（Form ），这个Form 有一个高级模式，当选择高级模式后会出现更多额外的文本框给用户填写。

uni.loading用法在使用uni-app开发应用程序时，我们可能会遇到一些加载状态，例如页面加载、数据加载等。

为了给用户更好的体验，我们通常需要使用加载状态指示器，即loading。

在uni-app中，我们可以使用uni.loading()方法来显示加载指示器。

一、用法介绍uni.loading()方法用于显示加载指示器，它接受一个可选的参数，用于指定加载指示器的样式。

该方法返回一个Promise对象，用于等待加载完成或取消加载。

在加载指示器显示期间，用户无法进行其他操作，直到加载完成或取消加载。

二、使用示例下面是一个使用uni.loading()方法的示例：```javascript//显示加载指示器，指定样式为'loading-custom'color:'#fff',//加载指示器的颜色spinner:'circle',//加载指示器的形状mask:true,//显示遮罩层content:'加载中，请稍候...',//加载指示器的文本内容hideLoading:function(data){//加载完成后回调函数，可以用来更新界面或其他操作console.log(data);//输出隐藏加载指示器的数据},cancelLoading:function(){//取消加载指示器，返回Promise状态为falsereturnnewPromise((resolve,reject)=>{//取消加载的逻辑resolve(false);//成功取消reject('加载被用户取消');//失败取消});}});```在上述示例中，我们使用了uni.loading()方法来显示一个自定义样式的加载指示器。

我们可以通过传入不同的参数来自定义加载指示器的样式，例如颜色、形状、文本内容等。

在加载完成后，我们可以通过hideLoading()方法来隐藏加载指示器，并更新界面或其他操作。

antdesign react loading 用法在开发大型应用程序时，数据加载和处理往往是一个重要的环节。

当数据加载时，我们可能需要一个有效的解决方案来处理用户界面，以防止页面卡顿或无响应。

在这种情况下，AntDesign提供了一个非常有用的组件——Loading组件。

一、介绍AntDesign的Loading组件是一个非常方便的工具，用于在应用程序的不同部分显示加载状态。

它允许您在数据加载时显示一个加载指示器，并在数据加载完成后隐藏它。

这不仅可以提高用户体验，还可以帮助您避免页面卡顿和无响应的问题。

二、安装与引入要使用AntDesign的Loading组件，您需要首先将其添加到您的项目中。

您可以使用npm或yarn来安装它，或者直接从AntDesign的官方网站下载。

一旦您安装了它，您需要将其引入到您的代码中。

通常，您可以使用以下代码来引入它：```javascriptimport{Loading}from'antd';```三、使用Loading组件一旦您引入了Loading组件，您就可以在您的代码中使用它了。

以下是一些基本用法：1.显示加载指示器：您可以使用Loading组件的基本形式来显示加载指示器。

例如：```javascript<Loadingtype="text"indeterminate={true}/>```这将显示一个包含文本的加载指示器，直到数据加载完成。

2.自定义样式：如果您需要自定义加载指示器的样式，可以使用Loading组件的style属性。

例如：```javascript<Loadingtype="text"indeterminate={true}style={{backgroundColor:'#f5 f5f5',color:'#333'}}/>```这将更改加载指示器的背景颜色和文本颜色。

Unity3D游戏开发之自定义 Unity 网络播放器加载屏幕自定义 Unity 网络播放器 (Web Player) 加载屏幕Unity网络播放器 (Web Player) 在加载内容时默认显示一个小的 Unity 徽标和进度条。

可以自定义加载屏幕的外观，包括徽标和进度条显示。

（请注意，只有 Unity 专业版可以修改载入程序图像。

）有六个可选参数可以传递给 UnityObject，用来自定义 Unity 网络播放器 (Web Player) 加载屏幕的外观。

它们分别是：1、backgroundcolor：加载时网络播放器内容显示区域的背景色，默认为白色。

2、bordercolor：加载时网络播放器内容显示区域的边框色，默认为白色。

3、textcolor：错误信息文本的颜色（如数据文件加载失败时）。

默认为黑色或白色，根据背景色而定。

4、logoimage：自定义徽标图像的路径。

加载时徽标图像位于网络播放器内容显示区域的中央。

5、progressbarimage：加载时用作进度条的自定义图像路径。

进度条图像的宽度根据完成的文件加载量进行裁剪，采用动画效果，从零像素宽开始直至加载完成时到达原始宽度。

进度条位于徽标图像下方。

6、progressframeimage: 加载时将进度条框起来的自定义图像路径。

提供的所有颜色值必须为六位数十六进制颜色（如 FFFFFF、020F16 等）。

提供的图像路径可以是相对链接或绝对链接，所有图像文件必须为 RGB 格式（不透明）或 RGBA 格式（透明）以 8 位数/通道保存的 PNG 文件。

最后，progressframeimage 和 progressbarimage 的高度应相等。

文章出处【狗刨学习网】以下是自定义 Unity 网络播放器 (Web Player) 加载屏幕外观的脚本示例。

背景色设为浅灰 (A0A0A0)，边框颜色为黑色 (000000)，文本颜色为白色 (FFFFFF)，载入程序图像为 MyLogo.png、MyProgressBar.png 和 MyProgressFrame.png。

css3特效_CSS3弹跳Loading加载动画特效的实现今天给⼤家分享⼀款⾮常常⽤的css 加载动画，这款css3 Loading动画主要由⼏个⼩球通过规律的上下跳动，渐隐渐显⽽成，效果⼗分⽣动、流畅。

兼容IE8以上，尤其适合在移动端中使⽤，基本代替了图⽚实现加载的效果。

反弹加载动画效果如下：代码的实现：<div class="bouncing-loader"><div></div><div></div><div></div></div><style>@keyframes bouncing-loader {from {opacity: 1;transform: translateY(0);}to {opacity: 0.1;transform: translateY(-1rem);}}.bouncing-loader {display: flex;justify-content: center;}.bouncing-loader > div {width: 1rem;height: 1rem;margin: 3rem 0.2rem;background: #8385aa;border-radius: 50%;animation: bouncing-loader 0.6s infinite alternate;}.bouncing-loader > div:nth-child(2) {animation-delay: 0.2s;}.bouncing-loader > div:nth-child(3) {animation-delay: 0.4s;}</style>说明：注:1rem 通常是16px 。

@keyframes定义了⼀个具有两种状态的动画，其中元素更改opacity并使⽤transform: translateY()在2D平⾯上进⾏transform: translateY() 。

VUE-ElementUI⾃定义Loading图操作需求：element ui loading图只能使⽤⾃⼰的loading图，但很多场景下，需要替换成⾃⼰的gif图虽然⽂档中有些， element-loading-spinner="el-icon-loading" 可指定⾃定义图但经测试，也只是只能再elementui 图标库中的图，不是我们想的那个⾃定义图类的意思。

⾃定义图⽅法：1）添加⾃定义elementUI loading样式asserts下新建CSS⽂件夹及CSS⽂件⽐如myCss.css再⾥⾯，写⼊⾃定义的element类CSS样式.el-loading-spinner{/*这个是⾃⼰想设置的 gif 加载动图*/background-image:url('../img/loading.gif');background-repeat: no-repeat;background-size: 200px 120px;height:100px;width:100%;background-position:center;/*覆盖 element-ui 默认的 50% 因为此处设置了height:100%,所以不设置的话，会只显⽰⼀半，因为被top顶下去了*/top:40%;}.el-loading-spinner .circular {/*隐藏之前 element-ui 默认的 loading 动画*/display: none;}.el-loading-spinner .el-loading-text{/*为了使得⽂字在loading图下⾯*/margin:85px 0px;}CSS 细调，需要在浏览器调试⼯具中细调2）main.js 导⼊⾃定义样式这⾥注意，要在导⼊elementUI之后，再导⼊⾃⼰的样式，要不然会被elementUI覆盖import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';e(ElementUI); //element//⾃定义的element UI loading样式import './assets/css/myCss.css'3) v-loading<el-containerv-loading="loading"element-loading-background="rgba(255, 255,255, 0.5)"element-loading-text="加载中...">注意，这⾥不要加上element-loading-spinner="el-icon-loading" ，否则也会同时出现element图库中对应的loading图4）对应加载逻辑data () {return {loading: true}},startLoading(){this.loading=true;},endLoading(){this.loading=false;},axios请求接⼝时，开始loading,收到数据后，loading结束Ajx_GetClassList(){this.startLoading();this.$axios({url: url,method:'POST',}).then(res=>{this.endLoading();})},5) 运⾏时，是正常显⽰，但编译后，看不到⾃定义的图⽚资源了原因，VUE项⽬打包后，样式⽬录结构变为static/css解决build->utils.js 配置⽂件添加publicPath: '../../'// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath:'../../', // 解决element-ui中组件图标不显⽰问题fallback: 'vue-style-loader'})这样，编译后的element-ui资源也可以正常访问了⾃定义loading图效果补充知识：vue+elementUI⾃定义通⽤table组件⾃定义通⽤table组件,带分页,后端排序,路由带参数跳转,多选框,字段格式化1.tableList组件<!-- 费⽤报销编辑弹框 --><template><div class="table-temp"><el-table:data="tableData"bordersize="mini"fithighlight-current-rowheight="500"v-loading="loading"@selection-change="handleSelectionChange"@sort-change="sortChange"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column type="index" label="序号" align="center" fixed></el-table-column><!-- prop: 字段名name, label: 展⽰的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最⼩宽度(不传默认值), active: 是否有操作列 : 操作列字段名称, active.clickFun: 操作列点击事件, formatData: 格式化内容--><el-table-columnv-for="(item, key) in tableHeader":key="key":prop="item.prop":label="bel":fixed="item.fixed":min-widitem="item.minWidth"align="center":sortable="item.sortable"><template slot-scope="scope"><div v-if="item.active"><el-buttonv-for="(o, key) in item.active":key="key"@click="handleActive(scope.row, o.router, o.routerId)"type="text"size="small">{{}}</el-button></div><div v-else><a class="btn-a"v-if="item.router"@click="handleActive(scope.row,item.router, item.routerId)"><span v-if="!item.formatData">{{ scope.row[item.prop] }}</span><span v-else>{{ scope.row[item.prop] | formatters(item.formatData) }}</span></a><div v-else><span v-if="!item.formatData">{{ scope.row[item.prop] }}</span><span v-else>{{ scope.row[item.prop] | formatters(item.formatData) }}</span> </div></div></template></el-table-column></el-table><div class="pagination"><el-paginationbackgroundlayout="total, prev, pager, next":current-page="pagination.pageIndex":page-size="pagination.pageSize":total="pagination.pageTotal"@current-change="handlePageChange"></el-pagination></div></div></template><script>var _ = require('lodash');export default {props: {tableData: {type: Array,default: function() {return [];}},tableHeader: {type: Array,default: function() {return [];}},loading: {type: Boolean,default: false},pagination: {type: Object,default: {pageIndex: 0,pageSize: 15,pageTotal: 0}}},data() {return {multipleSelection: [],newPagination: {pageIndex: 0,pageSize: 15,pageTotal: 0}};},methods: {// 多选操作handleSelectionChange(val) {this.multipleSelection = val;this.$emit('selectFun', { backData: this.multipleSelection });},// 分页导航handlePageChange(val) {console.log('handlePageChange:', val);this.$set(this.pagination, 'pageIndex', val);//调⽤⽗组件⽅法this.$emit('pageChange', { backData: this.pagination});},// row:本⾏数据，route：要跳转的路由路径，跳转要传的参数routeIdhandleActive(row, route, routeId) {console.log(row);this.$router.push({path: '/' + route,query: {id: row[routeId]}});},//后端排序sortChange(column) {//console.log('sortChange:', column);//调⽤⽗组件⽅法this.$emit('sortChange', { backData: column });}},watch: {}},computed: {},created() {}};</script><style scoped>.btn-a{color: #409EFF}</style>2.组件使⽤<template><div><!-- 表格 --><table-List:tableData="tableData":tableHeader="tableHeader":loading="loading":pagination="pagination"@pageChange="pageChange"@selectFun="selectFun"@sortChange="sortChange"></table-List></div></template><script>import appMain from '../../../utils/app_main';export default {data() {return {// 请求加载loading: false,// 分页信息pagination: {pageIndex: 1,pageSize: 10,pageTotal: 60},tableHeader: [// 表头数据{ prop: 'id', label: '离职编号', minWidth: '100px', router: 'quitDetail', routerId: 'id', sortable: 'custom' }, {prop: 'resignationUserName',label: '姓名',router: 'employeeDetail',routerId: 'resignationUserId',sortable: 'custom'},{ prop: 'departName', label: '部门', minWidth: '100px', sortable: 'custom' },{ prop: 'jobRole', label: '所在岗位', sortable: 'custom' },{prop: 'onbordingTime',label: '⼊职⽇期',formatData: function(val) {let date = new Date(val);return appMain.formatDate(date, 'yyyy-MM-dd');},sortable: 'custom'},{prop: 'resignationTime',label: '离职⽇期',formatData: function(val) {let date = new Date(val);return appMain.formatDate(date, 'yyyy-MM-dd');},minWidth: '100px',sortable: 'custom'},{ prop: 'resignationReason', label: '离职原因', minWidth: '100px', sortable: 'custom' },{ prop: 'status', label: '流程状态', minWidth: '100px', sortable: 'custom' }],tableData: [],multipleSelection: [],};},methods: {// 组件选择完后把数据传过来selectFun(data) {this.multipleSelection = data.backData;},//表格组件返回排序对象sortChange(data) {let column = data.backData;//排序if (column.order) {//倒序if (column.order === 'descending') {// this.query.sortColumn = column.prop + ' ' + 'desc';} else {// this.query.sortColumn = column.prop;}} else {//不排序// this.query.sortColumn = '';}//请求接⼝},//分页导航pageChange(data) {this.pagination = data.backData;console.log('pageChange:', this.pagination);//分页变化--请求接⼝},}};</script>3.appMain.jsclass appMain {}// 时间格式化formatDate(date, fmt) {var date = new Date(date)if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));}let o = {'M+': date.getMonth() + 1,'d+': date.getDate(),'h+': date.getHours(),'m+': date.getMinutes(),'s+': date.getSeconds()};for (let k in o) {if (new RegExp(`(${k})`).test(fmt)) {let str = o[k] + '';fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));}}return fmt;};padLeftZero(str) {return ('00' + str).substr(str.length);}export default new appMain()以上这篇VUE-ElementUI ⾃定义Loading图操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

Flex布局做出⾃适应页⾯（语法和案例）Flex布局简介Flex英⽂为flexiable box，翻译为弹性盒⼦，Flex布局即弹性布局。

Flex布局为盒⼦模型提供了很⼤的灵活性，任何⼀个容器都可以指定为Flex布局，设置⽅法为：.box{display: flex;}⾏内元素使⽤Flex布局.box{display: inline-flex;}在webkit内核的浏览器上必须加上webkit前缀.box{display: flex;display: -webkit-flex;}注意：使⽤Flex布局之后，⾥⾯的float、clear、vertical-align属性将失效。

Flex布局中的基本概念采⽤ Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。

它的所有⼦元素⾃动成为容器成员，称为 Flex 项⽬（flex item），简称"项⽬"。

容器默认存在两根轴：⽔平的主轴（main axis）和垂直的侧轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；侧轴的开始位置叫做cross start，结束位置叫做cross end。

项⽬默认沿主轴排列。

单个项⽬占据的主轴空间叫做main size，占据的侧轴空间叫做cross size。

容器的属性1、flex-driection2、flex-wrap3、flex-flow4、justify-content5、align-items6、align-content1、flex-driection设置项⽬的排列⽅向，默认为rowflex-driection: row | row-reverse | column | column-reverse当设置为flex-driection: row，效果：当设置为flex-driection: row-reverse，效果：当设置为flex-driection: column，效果：当设置为flex-driection: column-reverse，效果：如下代码直接复制保存为html⽂件即可以查看效果：<style type="text/css">.box{display: flex;display: -webkit-flex;/*⽔平⽅向，左端对齐*/flex-direction: row;/*⽔平⽅向，右端对齐*//*flex-direction: row-reverse;*//*垂直⽅向，顶部对齐*//*flex-direction: column;*//*垂直⽅向，底部对齐*//*flex-direction: column-reverse;*/background: #999;width: 100%;}.box span{margin: 10px 10px;padding: 10px;background: #ff0;width: 50px;}</style><div class="box"><span>你好1</span><span>你好2</span><span>你好3</span><span>你好4</span></div>2、flex-wrap设置项⽬是否在⼀条线上，默认为nowrapflex-wrap: wrap | nowrap | wrap-reverse当设置为flex-wrap: wrap，效果：当设置为flex-wrap: nowrap，效果（不换⾏，默认会缩放）：当设置为flex-wrap: wrap-reverse，效果（第⼀⾏在下⽅）：如下代码直接复制保存为html⽂件即可以查看效果：<style type="text/css">.box{display: flex;display: -webkit-flex;/*换⾏*//*flex-wrap: wrap;*//*不换⾏，默认*//*flex-wrap: nowrap;*//*换⾏，第⼀⾏在下⽅*//*flex-wrap: wrap-reverse;*/background: #999;width: 100%;}.box span{margin: 10px 10px;padding: 10px;background: #ff0;width: 50px;}</style><div class="box"><span>你好1</span><span>你好2</span><span>你好3</span><span>你好4</span><span>你好5</span><span>你好6</span><span>你好7</span></div>3、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap4、justify-content属性定义项⽬在主轴上的对齐⽅式，默认值为flex-startjustify-content: flex-start | flex-end | center | space-between | space-around当设置为justify-content: flex-start，效果：当设置为justify-content: flex-end，效果：当设置为justify-content: center，效果：当设置为justify-content: space-between，效果：当设置为justify-content: space-around，效果：如下代码直接复制保存为html⽂件即可以查看效果：<style type="text/css">.box{display: flex;display: -webkit-flex;/*默认，项⽬左对齐*/justify-content: flex-start;/*项⽬右对齐*//*justify-content: flex-end;*//*项⽬居中对齐*//*justify-content: center;*//*项⽬两端对齐*//*justify-content: space-between;*//*每个项⽬两侧的间隔相等*//*justify-content: space-around;*/background: #999;width: 100%;}.box span{margin: 10px 10px;padding: 10px;background: #ff0;width: 50px;}</style><div class="box"><span>你好1</span><span>你好2</span><span>你好3</span><span>你好4</span><span>你好5</span><span>你好6</span><span>你好7</span></div>5、align-items属性定义项⽬在纵轴上的对齐⽅式，默认值为stretch，适⽤于项⽬在纵轴上⾼度不⼀样的情况，为了更好的看到效果，我为项⽬添加了⼀些样式align-items: flex-start | flex-end | center | baseline | stretch当设置为align-items: flex-start，效果：当设置为align-items: flex-end，效果：当设置为align-items: center，效果：当设置为align-items: baseline，效果：当设置为align-items: stretch，效果：如下代码直接复制保存为html⽂件即可以查看效果：<style type="text/css">.box{display: flex;display: -webkit-flex;/*纵轴的顶部对齐*//*align-items: flex-start;*//*纵轴的底部对齐*//*align-items: flex-end;*//*纵轴的中点对齐*//*align-items: center;*//*项⽬的第⼀⾏⽂字的基线对齐*//*align-items: baseline;*//*默认对齐⽅式，如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度*/align-items: stretch;background: #999;width: 100%;}.box span{margin: 10px 10px;padding: 10px;background: #ff0;width: 50px;}.box span:nth-of-type(2n){height: 80px;padding-top: 20px;}</style><div class="box"><span>你好1</span><span>你好2</span><span>你好3</span><span>你好4</span><span>你好5</span><span>你好6</span><span>你好7</span></div>6、align-content属性定义了多根轴线的对齐⽅式。

Vue⾃定义全局Toast和Loading的实例详解如果我们的Vue项⽬中没有⽤到任何UI框架的话，为了更好的⽤户体验，肯定会⽤到loading和toast。

那么我们就⾃定义这两个组件吧。

1、Toast组件⾸先，在common下新建global⽂件夹，存放我们的toast.vue和toast.js两个⽂件（当然⽂件的具体位置你可以⾃⾏安排）。

(1). toast.vue<template lang="html"><div v-if="isShowToast" class="toast-container" @touchmove.prevent><!-- 这⾥content为双花括号 --><span class="loading-txt">{content}</span></div></template><script>export default {data () {return {isShowToast: true,content: ''}}}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.toast-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.1);}.toast-msg {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 60%;padding: 35px;border-radius: 10px;font-size: 28px;line-height: 36px;background: #eee;color: #666;}</style>(2). toast.jsimport Vue from 'Vue'import ToastComponent from './Toast.vue'const Toast = {}let showToast = false // 存储loading显⽰状态let toastNode = null // 存储loading节点元素const ToastConstructor = Vue.extend(ToastComponent)Toast.install = function (Vue, options) {// 参数var opt = {duration: '1200'}for (var property in options) {opt[property] = options[property]}Vue.prototype.$toast = function (tips, type) {if (type === 'hide') {toastNode.isShowToast = showToast = false} else {if (showToast) {// 如果toast还在，则不再执⾏return}toastNode = new ToastConstructor({data: {isShowToast: showToast,content: tips}})toastNode.$mount() // 挂在实例，为了获取下⾯的toastNode.$eldocument.body.appendChild(toastNode.$el)toastNode.isShowToast = showToast = truesetTimeout(function () {toastNode.isShowToast = showToast = false}, opt.duration)}};['show', 'hide'].forEach(function (type) {Vue.prototype.$toast[type] = function (tips) {return Vue.prototype.$toast(tips, type)}})}export default Toast然后，我们需要把写好的组件在 /src/main.js 中引⽤⼀下。