uni-app scroll-view组件中refresher-enabled配置影响微信小程序的广告显示

发布于 1周前 作者 nodeper 来自 Uni-App

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>
如果广告内容中含有视频,则广告位置显示错误(如附件图所示,广告位置正常,但广告中的视频出现了置顶的情况)


3 回复

从效果上看是广告中使用的原生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的文档进行实现,并确保与下拉刷新功能兼容。

回到顶部