uni-app scroll-view组件中refresher-enabled配置影响微信小程序的广告显示
uni-app scroll-view组件中refresher-enabled配置影响微信小程序的广告显示
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | 10 | HBuilderX |
示例代码:
<template>
<view>
<scroll-view scroll-y="true"
:refresher-enabled="true"
:refresher-triggered="triggered"
@refresherrestore="triggered=false"
@refresherrefresh="refresherrefresh"
:style="{height:scrollHeight}"
@scrolltolower="requestPosts"
>
<view v-for="index in datas" :key="index">
<!-- 广告:原生模板广告-unit-id需要在微信开发者平台获取生成 -->
<view class="ad" v-if="(index==5 || index==10)">
<ad unit-id="adunit-9f1c9ded24b9ee83"></ad>
</view>
<view style="padding: 30rpx 0; color: #999;">
这里是列表遍历内容-----------------------
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
scrollHeight: '0',
datas: 0, // 模拟数据长度
triggered: false
}
},
mounted() {
this.scrollHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(145) + 'px';
this.requestPosts();
},
methods: {
refresherrefresh() {
console.log("下拉刷新被触发");
this.datas = 0;
this.requestPosts();
setTimeout(() => {
this.triggered = false;
}, 500)
},
requestPosts() {
uni.showLoading({
title: '模拟数据加载中...'
});
setTimeout(() => {
this.datas += 20;
uni.hideLoading();
}, 1000)
}
}
}
</script>
操作步骤:
在uniapp的微信小程序项目中新建页面,复制粘贴代码示例,并设置unit-id
为微信小程序的原生模板广告id,运行项目即可复现
注:广告类型必须为原生模板广告
预期结果:
广告位置正常显示
实际结果:
显示错误
bug描述:
使用scroll-view
组件做列表,并开启自定义下拉刷新,代码配置为refresher-enabled="true"
列表中随机位置插入微信小程序原生模板广告<ad unit-id="adunit-9f1c9ded24b9ee83"></ad>
如果广告内容中含有视频,则广告位置显示错误(如附件图所示,广告位置正常,但广告中的视频出现了置顶的情况)
从效果上看是广告中使用的原生video组件层级过高导致,在使用局部滚动时会出现问题,这是微信小程序的bug
编译到微信小程序后,scroll-view 和 ad 组件由微信提供
refresher-enabled配置为true时显示就错误,配置为false时显示正常,怕是与video组件层级没有太大的关系
在uni-app中,scroll-view
组件的refresher-enabled
属性用于开启或关闭下拉刷新功能。这一配置确实可能会对微信小程序中广告的显示产生影响,尤其是在广告组件(如激励视频广告、插屏广告等)与scroll-view
组件交互时。
以下是一个示例代码,展示了如何在uni-app中使用scroll-view
组件,并开启下拉刷新功能,同时考虑到广告显示的可能影响。请注意,本示例不会直接展示广告显示代码,因为广告显示通常依赖于第三方SDK(如微信小程序的广告组件),但会说明如何配置scroll-view
以及如何处理可能的冲突。
<template>
<view>
<!-- scroll-view组件,开启下拉刷新 -->
<scroll-view
scroll-y="true"
:refresher-enabled="true"
@refresh="handleRefresh"
style="height: 100vh;"
>
<!-- 内容区域 -->
<view class="content">
<!-- 这里可以放置你的页面内容 -->
<view v-for="item in items" :key="item.id">{{ item.text }}</view>
</view>
<!-- 假设广告位在这里,但需要注意广告组件的加载和显示时机 -->
<!-- <ad unit-id="your-ad-unit-id"></ad> -->
<!-- 这里的广告位可能需要动态处理,以避免与下拉刷新冲突 -->
<view v-if="!isRefreshing" class="ad-placeholder">
<!-- 这里可以是一个占位符,或者动态加载广告组件的逻辑 -->
<!-- 广告加载和显示逻辑应确保不会在下拉刷新时被干扰 -->
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
items: Array.from({ length: 20 }, (_, i) => ({ id: i, text: `Item ${i + 1}` })),
isRefreshing: false,
};
},
methods: {
handleRefresh() {
this.isRefreshing = true;
// 模拟异步刷新操作
setTimeout(() => {
// 刷新完成后重置状态
this.isRefreshing = false;
// 这里可以添加刷新后的数据更新逻辑
}, 2000);
},
},
};
</script>
<style>
.content {
padding: 20px;
}
.ad-placeholder {
/* 广告位占位符样式 */
height: 200px;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
color: #888;
}
</style>
在上述代码中,scroll-view
组件开启了下拉刷新功能,并通过v-if
指令控制广告位的显示,确保在下拉刷新时不会显示广告,从而避免可能的冲突。实际项目中,广告组件的加载和显示逻辑应根据第三方SDK的文档进行实现,并确保与下拉刷新功能兼容。