uni-app ad广告总在页面的最上端闪一下，然后才回到设置的位置上
uni-app ad广告总在页面的最上端闪一下，然后才回到设置的位置上
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win11 | HBuilderX |
产品分类：
uniapp/App
PC开发环境操作系统：
Windows
HBuilderX类型：
正式
HBuilderX版本号：
4.08
手机系统：
Android
手机系统版本号：
Android 11
手机厂商：
小米
手机机型：
小米9se
页面类型：
vue
vue版本：
vue3
打包方式：
云端
示例代码：
<ad adpid="000000000" @close="closeAd"></ad> 操作步骤：
页面底部放置广告组件即可
预期结果：
广告组件直接渲染到底部
实际结果：
会在页面最上方闪烁一下 才会回到底部
bug描述：
广告组件加载的时候总在页面的最上端闪一下，然后才回到设置的位置上，延迟加载也没用
在 uni-app 中，如果你使用 ad 组件时，广告在页面最上端闪一下然后才回到设置的位置，这通常是由于广告组件初始化时的布局问题导致的。以下是一些可能的解决方案：
1. 设置初始隐藏状态
你可以在广告组件加载完成之前，将其隐藏，等到广告加载完成后再显示出来。可以使用 v-if 或 v-show 来控制广告组件的显示。
<template>
<view>
<ad v-if="adLoaded" :unit-id="your-ad-unit-id"></ad>
</view>
</template>
<script>
export default {
data() {
return {
adLoaded: false
};
},
mounted() {
// 模拟广告加载完成
setTimeout(() => {
this.adLoaded = true;
}, 1000); // 根据实际情况调整延迟时间
}
};
</script>2. 使用 position: fixed 或 position: absolute
如果你希望广告固定在页面的某个位置，可以使用 position: fixed 或 position: absolute 来确保广告在页面加载时不会发生位置偏移。
<template>
<view>
<ad :unit-id="your-ad-unit-id" style="position: fixed; bottom: 0; width: 100%;"></ad>
</view>
</template>如果你希望广告在某个特定位置，可以使用 position: absolute 并设置 top 和 left 等属性。
3. 使用 hidden 属性
你可以使用 hidden 属性来隐藏广告组件，直到广告加载完成。
<template>
<view>
<ad :unit-id="your-ad-unit-id" :hidden="!adLoaded"></ad>
</view>
</template>
<script>
export default {
data() {
return {
adLoaded: false
};
},
mounted() {
// 模拟广告加载完成
setTimeout(() => {
this.adLoaded = true;
}, 1000); // 根据实际情况调整延迟时间
}
};
</script>4. 使用 uni.createAd 动态创建广告
你可以使用 uni.createAd 动态创建广告，并在广告加载完成后再将其插入到页面中。
<template>
<view>
<view ref="adContainer"></view>
</view>
</template>
<script>
export default {
mounted() {
const ad = uni.createAd({
adUnitId: 'your-ad-unit-id'
});
ad.onLoad(() => {
this.$refs.adContainer.appendChild(ad.$el);
});
ad.load();
}
};
</script>5. 检查广告组件的父容器
确保广告组件的父容器没有在页面加载时发生布局变化。如果父容器在广告加载时发生变化，可能会导致广告位置闪烁。
6. 使用 uni-app 的 ad 组件的 style 属性
你可以直接通过 style 属性来设置广告组件的位置，确保它在页面加载时就位于正确的位置。
<template>
<view>
<ad :unit-id="your-ad-unit-id" style="position: absolute; top: 100px; left: 0;"></ad>
</view>
</template>7. 使用 uni-app 的 ad 组件的 ad-style 属性
你还可以使用 ad-style 属性来设置广告组件的样式。
<template>
<view>
<ad :unit-id="your-ad-unit-id" :ad-style="{ position: 'fixed', bottom: '0', width: '100%' }"></ad>
</view>
</template>