FLEX

一、简介 前面都是介绍关于RN基本的API组件和UI组件，这些组件在复杂的复合组件中都是以颗粒度的形式存在的，如何有效合理的利用它们进行封装，是十分有必要的。开发复合组件的好处有很多，最为明显的就是复用和独立功能模块。复合组件分为两种，一种是静态的，这种组件不具备重用的特征，由静态数据组成，开发静态页面即可，不考虑数据的传递。另一种就是动态组件，它可以通过接收外部传入的动态数据进行联动，达到组件复用的效果。 二、应用 动态组件有很多应用，最典型的例如二级菜单组件，样式固定，数据可变，通过一级目录的选择来联动刷新二级目录的数据。思路很简单，首先构建数据模型；其次，对要封装的组件进行粒度拆分，依次按照此粒度构建组件；接着，设定组件的属性接口；然后，设计组件渲染规则并分解渲染， 绑定事件；最后，引用封装的组件并传入数据模型即可。完整示例如下： HeadList.js【粒度组件：头部标签】 import React, { Component } from ' react ' ; import { StyleSheet, View, Text, TouchableOpacity } from ' react-native ' ; export default class HeadList extends Component{ render(){ let headData = this

问题： Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute ? 与使用 position: absolute 相比，有没有更多的flexbox-ish方式来使“ Contact”右对齐？ .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <h2>Without title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <!--<div

在类Unix系统中可以使用top查看系统资源、进程、内存占用等信息。查看网络状态可以使用netstat、nmap等工具。若要查看实时的网络流量，监控TCP/IP连接等，则可以使用iftop。 一、iftop是什么？ iftop是类似于top的实时流量监控工具。 官方网站：http://www.ex-parrot.com/~pdw/iftop/ 二、iftop有什么用？ iftop可以用来监控网卡的实时流量（可以指定网段）、反向解析IP、显示端口信息等，详细的将会在后面的使用参数中说明。 三、安装iftop 安装方法1、 编译安装 如果采用编译安装可以到iftop官网下载最新的源码包。 安装前需要已经安装好基本的编译所需的环境，比如make、gcc、autoconf等。安装iftop还需要安装libpcap和libcurses。 CentOS上安装所需依赖包： yum install flex byacc libpcap ncurses ncurses-devel libpcap-devel Debian上安装所需依赖包： apt-get install flex byacc libpcap0.8 libncurses5 下载iftop wget http://www.ex-parrot.com/pdw/iftop/download/iftop-0.17.tar.gz tar

一般下拉之后，拿到数据合并，会默认展示顶部第一条，模仿其他聊天应用，回到下拉之前位置，如果不做处理，可以看见下拉得到的数据，本方法完美解决 https://ext.dcloud.net.cn/plugin?id=1841 插件市场 有问题可以留言或者加qq445849201讨论，亲测ios和android都没问题 <template> <view class="content"> <view v-if="isOver" class="msg-over">没有更多消息了</view> <view class="pull-content" v-for="(item,index) in msgList" :key="index" :class="index % 2 == 0 ? 'msg-right' : ''" :id="'msg'+item.id"> <view class="absolute-view" v-show="showIndex>index?'show-index':''"></view> <view class="img-box" v-if="item.type == 'img'"> {{item.id}}<image class="logo" src="/static/logo.png"></image> </view> <view v-else class=

布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现），希望能给需要的小伙伴带来一些帮助。 ​ 文章目录： 1.常用居中方法：水平居中，垂直居中， 2.单列布局 3.二列&三列布局：float+margin，position+margin，圣杯布局（float+负margin），双飞翼布局（float+负margin），flex布局 1.常用居中方法 居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中： 水平居中 子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析： 行内元素：对父元素设置text-align:center; 定宽块状元素: 设置左右margin值为auto; 不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center; 通用方案: flex布局，对父元素设置display:flex;justify-content:center; 垂直居中 垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。 父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height 父元素一定

问题： We have an employee whose surname is Null. 我们有一个姓为Null的员工。 Our employee lookup application is killed when that last name is used as the search term (which happens to be quite often now). 当使用该姓氏作为搜索词时，我们的员工查找应用程序将被杀死（这种情况现在经常发生）。 The error received (thanks Fiddler!) is: 收到的错误（感谢Fiddler！）是： <soapenv:Fault> <faultcode>soapenv:Server.userException</faultcode> <faultstring>coldfusion.xml.rpc.CFCInvocationException: [coldfusion.runtime.MissingArgumentException : The SEARCHSTRING parameter to the getFacultyNames function is required but was not passed in.]</faultstring> Cute, huh? 可爱吧？ The

路由参数解耦 一般在组件内使用路由参数，大多数人会这样做： export default { methods: { getParamsId() { return this.$route.params.id } } } 在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 正确的做法是通过 props 解耦 const router = new VueRouter({ routes: [{ path: '/user/:id', component: User, props: true }] }) 将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数 export default { props: ['id'], methods: { getParamsId() { return this.id } } } 另外你还可以通过函数模式来返回 props const router = new VueRouter({ routes: [{ path: '/user/:id', component: User, props: (route) => ({ id: route.query.id }) }] }) 函数式组件 函数式组件是无状态，它无法实例化，没有任何的生命周期和方法

一、什么是flex布局 　　flex 是 flexible box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 flex 布局。 你可以将前端页面想象成一个巨大的容器，里面装满了各式各样的盒子元素，为了方便元素排列布局，css引入弹性布局。即设置了弹性布局的元素，他的大小和对齐方式将更加灵活的随着他所处空间的大小而改变。 任何元素都可以使用flex布局，不区分行内、块级元素。注意：webkit 内核的浏览器，必须加上-webkit前缀。且设为 flex 布局以后， 子元素的float、clear和vertical-align属性将失效 。 二、flex布局中的基本概念 　　1.容器 　　　　采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。我更喜欢称为父容器和子容器。容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式， 如果两者同时设置，以子容器的设置为准。 　　2.轴线 　　　　容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end

我才不会说是因为自己对 flex 一知半解导致面试的时候被问住，所以才来记录的。感谢阮一峰大神的博客 文章 9102年了，是时候记录一波 flex 布局了。 写在前面，其实 flex 布局并没有多难，记住一些属性即可。然而之前由于自己懒癌作祟，导致总是对 flex 一知半解。面试的时候，不能说挂在这道题上，但总是答得不好。 HOW 为一个元素设置 display: flex 即可 .box { display: flex; display: -webkit-flex; } 采用 flex 布局的元素，成为 flex 容器，子元素称为 flex 项目 容器默认存在两根轴 水平的主轴 main axis 垂直的交叉轴 cross axis 主轴开始位置叫做 main start ，结束位置叫做 main end 交叉轴开始位置叫做 cross start ，结束位置叫做 cross end 项目默认沿主轴排列 容器的属性 flex-direction：决定主轴的方向 row：默认值，主轴为水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿 flex-wrap：默认情况下，项目都排列在一条线( 轴线 )。 nowrap：默认，不换行 wrap：换行 wrap

用float代替 来源： oschina 链接： https://my.oschina.net/u/4344838/blog/4287156