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元素上手指的列表，尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX / clientY: //触摸点相对浏览器窗口的位置

pageX / pageY: //触摸点相对于页面的位置

screenX / screenY: //触摸点相对于屏幕的位置

identifier: //touch对象的ID

target: //当前的DOM元素

ios系统下 数字变蓝

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

<!-- 阻止方法加meta标签 -->

<meta name="format-detection" content="telephone=no" />

textarea去掉右下角可拖动按钮

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

apicloud获取本地文件路径

api.fsDir

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