APICloud框架——总结一下最近开发APP遇到的一些问题

距离上一次发文都过去十天了, 下班回来懒的就想睡觉, 今天520一个重要的节日, 恩爱已经秀完, 该干点事情了！！

总结一下最近开发遇到的一些问题, 以及解决方案

纯css三角形

/* 没有哪个方向的边框, 三角形就朝向那边 */width: 0;height: 0;border-top: .5rem solid transparent;border-left: 1rem solid red;border-bottom: .5rem solid transparent;

:after和:before伪元素

在设置宽高之前,必须先设置display属性

:before {    content: "";    display: inline-block;    width: .18rem;    height: .18rem;    background-color: #f00;}

禁止换行, 使文字在一行内显示

white-space:nowrap;overflow: hidden;text-overflow: ellipsis;

朋友圈上传图片, 根据图片数量自适应大小

// 根据上传图片的多少自适应图片的大小(function() {    // 获取所有有图片内容的容器, apicloud的选择器, 其他选择器亦可    var listContent = $api.domAll('.listContent');    for (var i = 0; i < listContent.length; i++) {    // 每个图片容器中有几个图片        var imgArr = listContent[i].getElementsByClassName('content_img');        var imgCount = imgArr.length        // 根据每个容器中的图片输了设置当前容器中图片的尺寸        if (imgCount == 1) {                $api.css(listContent[i].getElementsByClassName('content_img')[i], 'width:2.86rem;margin:0');        } else if (imgCount == 2 ||　imgCount == 4) {            for (var j = 0; j < imgCount; j++) {                $api.css(listContent[i].getElementsByClassName('content_img')[j], 'height:2.78rem');            }        }  else {            for (var j = 0; j < imgCount; j++) {                $api.css(listContent[i].getElementsByClassName('content_img')[j], 'height:1.8rem');            }        }    }})()

qq历史聊天记录–网页面上部添加标签后不滚动

// 获取历史聊天记录前 页面高度mainH=$api.offset($api.dom('.main')).h;_main = mainH// 修改获取聊天记录后的页面位置mainH = $api.offset($api.dom('.main')).h;scrollH = mainH - _main;_main =  mainH;window.scrollTo(0,scrollH-50);

apicloud阻止冒泡事件

// 添加到标签上// 阻止默认事件onclick = 'event.preventDefault();'// 阻止冒泡事件onclick = 'event.stopPropagation();'// 或者onclick = 'api.closeWin();event.preventDefault();'onclick = 'api.closeWin();event.stopPropagation();'

排他原则(干掉所有人,留下我自己)

function li_span(ele) {    // 选择传入元素的所有同级元素    var allDom = ele.parentNode.childNodes    for (var i = 0; i < allDom.length; i++) {        $api.removeCls(allDom[i], 'sel');    }    $api.addCls(ele, 'sel');}

android4.4 兼容flex

定义

.box{    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */    display: -moz-box; /* 老版本语法: Firefox (buggy) */    display: -ms-flexbox; /* 混合版本语法: IE 10 */    display: -webkit-flex; /* 新版本语法: Chrome 21+ */    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */}

主轴对齐方式

.box{    -webkit-box-pack: center;    -moz-justify-content: center;    -webkit-justify-content: center;    justify-content: center;}/* 旧版语法有4个参数，而新版语法有5个参数，兼容写法新版语法的 space-around 是不可用的 */.box{    box-pack: start | end | center | justify;    /*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/    justify-content: flex-start | flex-end | center | space-between | space-around;    /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/}

侧轴对齐方式

.box{    -webkit-box-align: center;    -moz-align-items: center;    -webkit-align-items: center;    align-items: center;}/* 参数 */.box{    box-align: start | end | center | baseline | stretch;    /*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/    align-items: flex-start | flex-end | center | baseline | stretch;    /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/}

显示方向

• 左到右

.box{    -webkit-box-direction: normal;    -webkit-box-orient: horizontal;    -moz-flex-direction: row;    -webkit-flex-direction: row;    flex-direction: row;}

右到左

.box{    -webkit-box-pack: end;    -webkit-box-direction: reverse;    -webkit-box-orient: horizontal;    -moz-flex-direction: row-reverse;    -webkit-flex-direction: row-reverse;    flex-direction: row-reverse;}

上到下

.box{    -webkit-box-direction: normal;    -webkit-box-orient: vertical;    -moz-flex-direction: column;    -webkit-flex-direction: column;    flex-direction: column;}

下到上

.box{    -webkit-box-pack: end;    -webkit-box-direction: reverse;    -webkit-box-orient: vertical;    -moz-flex-direction: column-reverse;    -webkit-flex-direction: column-reverse;    flex-direction: column-reverse;}

是否允许子元素伸缩

.item{    -webkit-box-flex: 1.0;    -moz-flex-grow: 1;    -webkit-flex-grow: 1;    flex-grow: 1;}/* 参数 */.item{    box-flex: <value>;    /*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/    flex-grow: <number>; /* default 0 */    /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/    flex-shrink: <number>; /* default 1 */    /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/}

触摸对象

以下是四种touch事件touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕上滑动式触发touchend: //手指离开屏幕时触发touchcancel: //系统取消touch事件的时候触发，这个好像比较少用每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表touches: //当前屏幕上所有手指的列表targetTouches: //当前dom元素上手指的列表，尽量使用这个代替toucheschangedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：clientX / clientY: //触摸点相对浏览器窗口的位置pageX / pageY: //触摸点相对于页面的位置screenX / screenY: //触摸点相对于屏幕的位置identifier: //touch对象的IDtarget: //当前的DOM元素

ios系统下 数字变蓝

多位数字在ios系统下会被识别为电话变得可点击

<!-- 阻止方法加meta标签 --><meta name="format-detection" content="telephone=no" />

textarea去掉右下角可拖动按钮

可以使用 resize: none; 来禁用 textarea 右下角的拖动图标。

apicloud获取本地文件路径

api.fsDir

欢迎访问我的博客http://www.yuanjingzhuang.com/