FLEX | 易学教程

企业和个人都需要的终极跨平台全端解决方案 UniApp

阅读更多关于企业和个人都需要的终极跨平台全端解决方案 UniApp

相信大家在平时开发过程中都会遇到这两类问题：很多中小型企业要快速开发一个产品，这个产品至少需要覆盖平台范围为：ios、Android、web/H5、微信/支付宝小程序，那么需要的投入的人力成本、时间成本、维护成本会很高，然而每个老板的想法都是“又想马儿跑，又想马儿不吃草”这样的思想，成本严格把控，这个时候咋办？作为程序员，每个人都会接私活，现在已经不像诺基亚时代那样，客户的需求仅仅只是一个web页面那么简单了，大多客户的需求就是 ios、Android、微信小程序、web/H5 这四大平台缺一不可，对于个人来讲，那么你只能做一端到两端，那么剩余的部分你就需要借助其他开发者，这样赚的钱就少了，并且投入的时间并不会减少。那么有没有两全其美的解决方案呢？在这里我们来聊一聊UniApp 这个前端框架，这个框架可以通过只需要一个人编写一套代码就能开发出一个跨平台兼容全端的产品，对于企业来讲，节省了更多的成本；对于个人来讲，完全满足客户需求，可以赚取更多的钱。一石二鸟，大家都开心。 UniApp这个框架是基于Vue.js开发的，通过uniapp可以开发出跨平台的产品，所以如果对vue有一定的了解，那么这套框架可以很快速的掌握，当然，如果你对微信小程序也了解的话，也能够迅速掌握的，因为UniApp封装并且兼容了微信小程序的组件和api。当然vue.js以及微信小程序都是目前非常主流的技术

uni-app——uni-ui的使用

阅读更多关于 uni-app——uni-ui的使用

uni-app——uni-ui的使用 0.2882019.06.09 22:53:34字数 186阅读 2602 1）uni-ui 是全端兼容的基于flex布局的ui库； 2）可以使用 npm 的安装使用方式，也可下载相关组件直接使用； 3）uni-ui 不支持使用 Vue.use() 的方式安装 4）uni-ui 依赖 scss，若是 HBuilderX 中创建的 uni-app 项目，需要在 HBuilderX 中安装 scss 插件；如果是使用 cli 创建的 uni-app 项目，需要在项目下npm安装 node-sass 和 sass-loader 1. 初始化项目在 HBuilderX 中新建 uni-app 项目，进入项目目录，执行： npm init -y 2. 安装 uni-ui npm install @dcloudio/uni-ui 3. 使用 uni-ui 在 script 中引用组件： <script > import {uniCard, uniPagination} from '@dcloudio/uni-ui' // 也可使用此方式引入组件 // import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' export default { components: {

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

阅读更多关于 uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

uniApp原生导航栏 uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，dcloud平台对app-plus做了详细说明： app-plus配置，不过目前暂支持H5、App端，不支持小程序。在page.json里配置app-plus即可 { " path " : " pages/ucenter/index " , " style " : { " navigationBarTitleText " : " 我的 " , " app-plus " : { " titleNView " : { " buttons " : [ { " text " : " \ue670 " , " fontSrc " : " /static/iconfont.ttf " , " fontSize " : " 22px " , " float " : " left " }, { " text " : " \ue62c " , " fontSrc " : " /static/iconfont.ttf " , " fontSize " : " 22px " } ], " searchInput " :{ ... } } } } }, 那么如何监听按钮、输入框事件？ uni-app给出了相应API

如何实现自适应导航页

阅读更多关于如何实现自适应导航页

分辨率大于960像素分辨率大于768像素小于960像素分辨率大于480像素小于768像素分辨率小于480像素 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自适应导航页</title> <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="service-section"> <div class="inner-width"> <h2 class="section-title">Our Service</h2> <div class="border"></div> <div class="service-container"> <div class="service-box"> <div class="service-icon"> <i class="fas fa

flex:1 到底代表什么?

阅读更多关于 flex:1 到底代表什么?

今天在做项目的时候遇到一个关于布局的问题, 就是 flex: 1; 我一直以为 flex: 1; 代表的是 flex: aoto; 后来发现结果并不是这样, 所以写一篇博客来讲解一下 flex: 1; 代表什么代码第一版 < div class = "container" > < div id = "div" > 我是一个div </ div > < div id = "div" > 我是一个很多字div </ div > < div id = "div" > 我是一个更多字而且第三个div </ div > </ div > < style > . container { display : flex ; } # div { border : 1 px solid red ; flex : 1 ; } </ style > 利用 flex: 1; 确实实现了三个不同内容的 div 平分空间, 所以按我以前的想法来说: flex: 1; === flex: 1 1 auto; 这是完整写法, 详见 mdn , 它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto) 第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大第二个参数表示: flex-shrink 定义了项目的缩小比例

【孤独旅者】封装一个三级联动和基于Vue的mintUI三级联动

阅读更多关于【孤独旅者】封装一个三级联动和基于Vue的mintUI三级联动

原生JS封装： moreSelect: function (url,elements) { function GetArea(url) { this .url = url this .init(elements) } GetArea.prototype = { num: 0 , selections: null , list: [], createOptions(data, parent) { if (!parent) return if (parent.children) { var leng = parent.children.length for ( var j = 0; j < leng; j++ ) { parent.lastElementChild.textContent = '' parent.lastElementChild.remove() } } for ( var i = 0; i < data.length; i++ ) { var option = document.createElement('option' ); option.textContent = data[i].name || data[i] parent.appendChild(option) } parent.addEventListener( 'change', this

Vue

阅读更多关于 Vue

效果踩坑经历 TLDR; 在几个小时的google和stack overflow的苦苦搜索后，无果。经过自我思考，想到了一种实现方法：整个页面是一个盒子，要出现滚动条，必然里面的元素要溢出。也即是，元素水平overflow，那么就出现水平滚动条。元素垂直overflow，那么会出现垂直滚动条。我原先是将眼光放在局部的小盒子(如下图)，无论我怎么调整display或者overflow，当这个局部的元素溢出的时候，滚动条是根据这个局部生成的。那么我如果要把水平滚动条出现的时候固定在底部，我就要把眼光放在整个大盒子（全局）。当大盒子里面的小盒子的元素溢出时，必然出现滚动条。 <u>原理： flex布局在设置高度下，如果flex里面的内容大于这个高度或者宽度时，那么会溢出然后产生滚动条(垂直或者水平)。那么我就在Vue加载时，整个大盒子(这是class="main-container"，也可以认为是网页的body)的高度设置为viewport的高度。为什么设置为viewport的高度？一是上述原因。再啰嗦一下，也即是我把整个flex布局的大盒子的面积设置为viewport的面积。如果不够面积去承载元素（发生溢出），那么滚动条必然出现。而且有个前提是滚动条是贴着盒子的右下的边。二是可以适应不同的设备。 </u> 具体实现：在整个Vue初始加载的时候设置这个class=

css布局

阅读更多关于 css布局

这种两列布局的样式是我们在平时工作中非常常见的设计，同时也是面试中要求实现的高频题。很有必要掌握以备不时之需：整理了几种实现方法，当然，风骚的代码不止这几种能实现，欢迎各位的补充。方法汇总目录简单粗暴 float 来实现 absolute "离家出走"定位过去圣杯布局 - margin负边距高贵优雅 flex 轻松搞定 table 表示不服气，凭什么我要被抛弃衍生 - display: table-cell ; pc端定死宽？那 inline-block 携手 width 也是个好方法 * 以下汇总方法不贴图的，都是和上边这个图一模一样的效果。案例初始化html结构如下：案例这里使用的结构比较简单，但是核心思想是实现左边固定，右边自适应。具体你业务中左边长啥样，右边内部又有啥复杂结构，那就要视具体情况了。但是大的思想结构和模型有了以后，再往里边填充细节就比较好说了。 <div class="cont"> <div class="head"> <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt=""> </div> <div class="txt"> 　　这里边应该有很多文字的，为了篇幅我就删掉了。 </div> </div> 案例初始化css样式如下： /* *

css布局

阅读更多关于 css布局

一、上中下左固定 - fixed+margin 概括：如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。 html： <header>我是头部position: fixed;z-index: 9;</header> <section class="flexModal fixedLeft"> <nav> <ul> <li>section.flexModal nav ul>li*5</li> <li>栏目一</li> <li>栏目二</li> <li class="active">栏目三</li> <li>栏目四</li> <li>栏目五</li> </ul> </nav> <article> <h3> 内容区域 section.flexModal articel </h3> <p> section{ padding: 60px 0; } </p> <p> section.flexModal{ display: flex; } </p> <p> section.flexModal nav{ width: 200px; } </p> <p> section.flexModal article{ flex: 1; } </p> </article> </section> <footer>底部版权同头部 position: fixed;z-index: 9;<

Linux下onvi支持h265环境的的搭建：gsoap的安装及生产.c .h文件

阅读更多关于 Linux下onvi支持h265环境的的搭建：gsoap的安装及生产.c .h文件

1. 下载gsoap ： http://www.genivia.com/products.html#notice ，既Open Source gSOAP版本，并解压进入目录安装，configure后面的选项可以根据自己的需求添加，--prefix后面填写的gsoa安装所在的路径，我安装的是当前的路径，如果prefix出现安装错误，则需要把路径改成绝对路径。 ./configure --enable-ipv6 --enable-debug --prefix=./ make make install 2. gsoap虽然安装完成，但是你还要检查你的linux下是否也安装了以下内容，没有的话要安装一下，gsoap才能正常使用： .Bison或Yacc 安装：" https://www.gnu.org/software/bison/ " Flex的安装：" https://github.com/westes/flex/releases " OpenSSL 的安装：" https://www.openssl.org/source/ " 可选的Zlib支持：" http://www.zlib.net/ " 3. 把gsoap-2.8/gsoap/typemap.dat也拷贝到一个新建工作目录下，并修改该文件的内容，在命名空间已经存在的trt下，新增支持h265的代码行 tr2 = http:/

订阅 FLEX