快应用广告缩放
# 快应用实现摇一摇
快应用提供的有监听重力感应数据接口;
直接调用即可,然后就是摇动幅度的适配,通过尝试得到的适合当前的值是 12
代码如下:
import sensor from "@system.sensor";
const bastSensorTimer = 1200;
const sensorAmplitude = 12;
let timerClikcSensorTimer = 0;
sensor.subscribeAccelerometer({
callback: (ret) => {
const cutTime = new Date().getTime();
if (
ret.x > sensorAmplitude ||
ret.y > sensorAmplitude ||
ret.z > sensorAmplitude
) {
if (cutTime - timerClikcSensorTimer > bastSensorTimer) {
sensorSend.postMessage(typeFrom);
timerClikcSensorTimer = cutTimee;
}
}
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 弹窗广告缩放
弹窗上面需要增加底部的 banner 广告,内容长度不足,遂,对广告进行了缩放,
# 1.选择的方法是使用 scale;
transform-orgin:(0px,0px);
transfrom:scale(0.7,0.7);
1
2
2
缩放之后,存在的问题是依然占位,在 web 端可以使用
zoom:0.7;
1
解决缩放的问题,然而快应用不支持,
解决方案 margin 负值,之前没发现问题,使用的固定值,但是由于广告尺寸不同,所以不能使用固定值,解决方法是获取当前元素的实际高度,跟缩放之前的宽度进行
实现方法:
margin-bottom:-(缩放前高度-缩放前高度*缩放比例)
缩放前宽度:400px;
缩放前高度:自适应;
缩放后宽度:300px;
缩放后高度:200px;
计算出应该的 margin 负值 ----
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
略微有点麻烦,
# 2.使用计算;
通过 scale 找到合适的缩放比例
直接修改宽度,乘于 合适的 宽度
修改适配样式
# 目标:快应用实现如同百度的封装:
- 初具雏形,然后就是怎么封装之后上传 npm
编辑 (opens new window)
上次更新: 2025/01/07, 6:01:00