距離上一次發文都過去十天了, 下班回來懶的就想睡覺, 今天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