<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> 
JinyuXiii
- 发布：2024-10-30 11:22
- 更新：2024-10-30 11:27
- 阅读：187
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 4.31
第三方开发者工具版本号： 1.06.2409131
基础库版本号： 3.4.10
项目创建方式： HBuilderX
示例代码：
操作步骤：
在uniapp的微信小程序项目中新建页面，复制粘贴代码示例，并设置unit-id为微信小程序的原生模板广告id，运行项目即可复现
注：广告类型必须为原生模板广告
在uniapp的微信小程序项目中新建页面，复制粘贴代码示例，并设置unit-id为微信小程序的原生模板广告id，运行项目即可复现
注：广告类型必须为原生模板广告
预期结果：
广告位置正常显示
广告位置正常显示
实际结果：
显示错误
显示错误
bug描述：
使用scroll-view组件做列表，并开启自定义下拉刷新，代码配置为:refresher-enabled="true"
列表中随机位置插入微信小程序原生模板广告<ad unit-id="adunit-9f1c9ded24b9ee83"></ad>
如果广告内容中含有视频，则广告位置显示错误（如附件图所示，广告位置正常，但广告中的视频出现了置顶的情况）
JinyuXiii (作者)
refresher-enabled配置为true时显示就错误，配置为false时显示正常，怕是与video组件层级没有太大的关系
2024-10-30 11:31