uniapp 小代码记录

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('图片路径')