总结一下最近开发遇到的一些问题, 以及解决方案
纯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不缩小）*/
}
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQoAAAEJCAMAAABbgZlVAAAApVBMVEX/////s1n5Ymg2vJn/+tX/4uX///D/+uXy//822eWNvJnf///M+v////k20eE2vNg2vLGzvJns///p/f3/+vet8fVP4uv/7+r49d3/8NFP0NE2xMTAzZmEyJn4///T+v+59v+B7PX/+u/4+u9P5e+H5+vy8M//4Mvy7sU2vMXZ58Lf5bXG4bXT25nG1ZmnvJmHvJl7vJlbvJlPvJn/yJL/yoL/s3hhNYDqAAAB6ElEQVR42u3Vx04DMRRA0QcmJEACgST03nuH//80UkBsEBLFYGXO3Y7nLY5cIiRJkiRJkiRJkiTprcmxCwUKFCjyU3z778JCgQIFir+kSF/ufcrEv4cCBQoUKFCgQIECBQoUKFCgQIEiF8XzU/EU7aNORPf8PifF48lKN6ZKp2j3RquOH/JR1IYTiqdY3h6tal1lpNhfWymfor0bsbq13oxYy3pX1MqnWJiL1nV/b0TUbytOMdOI+mxK80sxvYhiQNHfHChQfHBAbipOMd+J6c2UDvvX5l3FKc6aw8d0J+K06o9p2ntdNdgbuShqb0N+pJGdYqM5/NS6SJWnSBu9RsTBZULxeb9D8TuhQIECBQoUKFCgQIECBQoUKFCgqAbFGIQCBQoUKFCgQIECBQoUKFCgKCQUKFCgQIECBQoUKFCgQIECRSGhQIECBQoUKFCgQIECBQoUKAoJBQoUKFCgQIECBQoUKFCgQFFIKFCgQIECBQoUKFCgQIECBYpCQoECBQoUKFCgQIECBQoUKFAUEgoUKFCgQIECBQoUKFCgQIGikFCgQIECBQoUKFCgQIECBQoUhYQCBQoUKFCgQIECBQoUKFCgKCQUKFCgQIECBQoUJVKMVShQoECRlUKSJEmSJEmSJEmSKtALjStdfHLpgssAAAAASUVORK5CYII=" alt="">
触摸对象
以下是四种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