1、底部安全距离
主要用于iphone的刘海屏机型
css代码
.safe-area-inset-bottom {
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
2、判断值的类型
主要用于校验接口返回数据
js代码
// data为需要校验的数据，boolean | function | number | object | string | undefined
if (typeof data == 'object') {
// data是object
}else {
// data不是object
}
3、父子视图圆角
父视图圆角，想要子视图满足这个圆角，在父视图加入下方css样式代码
css代码
overflow: auto;
4、换行
css代码
// 强制不换行
white-space: nowrap;
// 自动换行
word-wrap: break-word;
// 强制英文单词断行
word-break: break-all;
// 超出显示省略号
text-overflow: ellipsis;
overflow: hidden;
如果是flex布局，需要显示省略号的正巧是flex:1的部分，增加width:0
flex: 1;
width: 0;
overflow: hidden; // 超出部分隐藏
white-space: nowrap; // 内容超宽后禁止换行显示
text-overflow: ellipsis; // 文字超出部分以省略号显示
5、数组操作
push( ) - 数组中添加新元素
let arr = ["banana", "apple", "durian", "cherry"]
// 数组中添加新元素
arr.push("orange");
// 结果：
["banana", "apple", "durian", "cherry", "orange"]
pop( ) - 移除最后一个数组元素
let arr = ["banana", "apple", "durian", "cherry"]
// 移除最后一个数组元素
arr.pop();
// 结果：
["banana", "apple", "durian"]
shift( ) - 移除第一个数组元素
let arr = ["banana", "apple", "durian", "cherry"]
// 移除第一个数组元素
arr.shift();
// 结果：
["apple", "durian", "cherry"]
unshift( ) - 将新项添加到数组起始位置
let arr = ["banana", "apple", "durian", "cherry"]
// 将新项添加到数组起始位置
arr.unshift("orange", "pear");
// 结果：
["orange", "pear", "banana", "apple", "durian", "cherry"]
splice( ) - 数组中添加新元素
let arr = ["banana", "apple", "durian", "cherry"]
// 数组中添加新元素
arr.splice(2, 0, "orange", "pear");
// 结果：
["banana", "apple", "orange", "pear", "durian", "cherry"]
// 移除数组的第三个元素，并在数组第三个位置添加新元素
arr.splice(2, 1, "orange", "pear");
// 结果：
["banana", "apple", "orange", "pear", "cherry"]
// 从第三个位置开始删除数组后的两个元素
arr.splice(2, 2);
// 结果：
["banana", "apple"]
sort( ) - 排列
按字母顺序排列
let arr = ["banana", "apple", "durian", "cherry"]
// 默认排序顺序为按字母升序
arr.sort();
// 结果：
["apple", "banana", "cherry", "durian"]
按数字顺序排列
let arr = [10, 40, 2, 5]
// 数字按字母顺序排列
arr.sort();
// 结果：
[10, 2, 40, 5]
// 数字升序排列
arr.sort(function(a, b){return a-b});
// 结果：
[2, 5, 10, 40]
// 数字降序排列
arr.sort(function(a, b){return b-a});
// 结果：
[40, 10, 5, 2]
reverse( ) - 颠倒数组中元素的顺序
let arr = ["banana", "apple", "durian", "cherry"]
// 颠倒数组中元素的顺序
arr.reverse();
// 结果：
["cherry", "durian", "apple", "banana"]
filter( ) - 数组条件过滤
let arr = [29, 18, 6, 37]
// 返回数组中所有元素都大于18的元素
arr.filter(function(a){return a>18});
// 结果：
[29, 37]
concat( ) - 合并数组
let arr = ["banana", "apple", "durian", "cherry"]
let arr2 = ["orange", "pear"]
let arr3 = ["litchi"]
// 合并数组的值
arr.concat(arr2, arr3)
// 结果：
["banana", "apple", "durian", "cherry", "orange", "pear", "litchi"]
slice( ) - 截取数组
let arr = ["banana", "apple", "durian", "cherry"]
// 截取角标为1（包含）到角标为3（不包含）的元素
arr.slice(1, 3);
// 结果：
["apple", "durian"]
// 截取角标为1（包含）到末尾的元素
arr.slice(1);
// 结果：
["apple", "durian", "cherry"]
// 截取倒数第三个（包含）到倒数第一个（不包含）的元素
arr.slice(-3, -1);
// 结果：
["apple", "durian"]
// 截取倒数第三个（包含）到末尾的元素
arr.slice(-3);
// 结果：
["apple", "durian", "cherry"]
6、scroll-view
横向滚动，内容动态增减，自动滚动到最右侧
// 加Math.raondom()，触发重新渲染
<scroll-view :scroll-x="true" :scroll-left="99999+Math.random()">
</scroll-view>
7、去掉button的默认背景色
background: transparent;
8、组件图片相对路径
require('图片路径')
网友评论