uni-app 小程序实际上线后 onPullDownRefresh 安卓端不能触发刷新

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

uni-app 小程序实际上线后 onPullDownRefresh 安卓端不能触发刷新

开发环境 版本号 项目创建方式
Windows Windows 11 HBuilderX
专业版 23H2

产品分类:

uniapp/小程序/微信

PC开发环境操作系统:

Windows

PC开发环境操作系统版本号:

Windows 11 专业版 23H2

HBuilderX类型:

正式

HBuilderX版本号:

3.99

第三方开发者工具版本号:

1.06.2402021

基础库版本号:

3.3.3

项目创建方式:

HBuilderX

示例代码:

<template>
<!-- 导航栏 -->
<navbar @find="findTeacher" :area="area" :subject="subject" />
<!-- 骨架屏-->
<indexSkeleton v-if="!isLoaded"></indexSkeleton>
<!-- 老师推荐区 -->
<scroll-view v-else class="scroll-view" scroll-y @scrolltolower="loadTeachers(findParams)">
<teacher-list class="teacher-list" :teachers="teachers" :isLoading="isLoading"></teacher-list>
</scroll-view>
</template> 
<script setup>
import {
onMounted,
ref
} from 'vue'
import {
onLoad,
onUnload,
onShow,
onPullDownRefresh,
onShareAppMessage,
} from '@dcloudio/uni-app'
import Student from '../../api/student.js'
const area = ref('')
const subject = ref('')
const isLoaded = ref(false)
const app = getApp()
// 定义首页的列表数据
const teachers = ref([])
const pageID = ref(1)
const isLoading = ref(true)
// 首页查询参数
const findParams = ref({
area: '',
subject: '',
search: ''
})
onLoad(async () => {
    // Promise.all让数组参数内的异步函数们并发执行
    await Promise.all([findTeacher()])
    isLoaded.value = true
    // 设置分享页面
    uni.showShareMenu({
        withShareTicket: true,
    })
})
onMounted(() => {
    // 获取选择的地区
    uni.$on('navbarCitySelected', async (data) => {
        findParams.value.area = data
        area.value = data
        await findTeacher(findParams.value)
    })
    // 获取选择的科目
    uni.$on('subjectSelected', async (data) => {
        findParams.value.subject = data
        subject.value = data
        await findTeacher(findParams.value)
    })
})
onUnload(() => {
    uni.$off('navbarCitySelected')
    uni.$off('subjectSelected')
})
// 下拉刷新老师列表
onPullDownRefresh(async () => {
    findParams.value.area = ''
    findParams.value.subject = ''
    area.value = ''
    subject.value = ''
    await findTeacher(findParams.value)
    // 停止刷新
    uni.stopPullDownRefresh()
})
// 分享的参数配置
onShareAppMessage(() => {
    return {
        title: "某某小程序",
        imageUrl: 'pages/static/images/icons/finder/area.png',
        desc: '某某小程序,嘿嘿',
        path: "pages/index/index",
    }
})
// 筛选老师
const findTeacher = async (params = {
    area: '',
    subject: '',
    search: '',
}) => {
    resetTeachers()
    await loadTeachers(params)
}
// 重置数据
const resetTeachers = () => {
    pageID.value = 1
    teachers.value = []
    isLoading.value = true
}
// 加载老师列表
const loadTeachers = async (params = {
    area: '',
    subject: '',
    search: '',
}) => {
    if (isLoading.value) {
        let {
            data
        } = await Student.apiListTeachers({
            area: params.area,
            subject: params.subject,
            search: params.search,
            page_id: pageID.value,
            page_size: app.globalData.pageSize,
        })
        // teachers数组追加数据
        teachers.value.push(...data.data ? data.data : [])
        pageID.value = data.page_id + 1
        if (data.page_id >= data.pages) {
            isLoading.value = false
        }
    }
}
</script> 
page {
background-color: #F3F3F3;
height: 100%;
display: flex;
flex-direction: column;
}
.teacher-list {
display: flex;
justify-content: center;
}
.scroll-view {
flex: 1;
height: 700rpx;
/* border: red 10px solid; */
}

操作步骤:

该页为小程序首页,在安卓端首页下拉刷新

预期结果:

在安卓端首页下拉正常刷新

实际结果:

该页为小程序首页,在安卓端首页下拉无法刷新

bug描述:

onPullDownRefresh 在小程序实际上线后,安卓端不能触发刷新,在开发工具中则没有这个问题。经测微信小程序和抖音小程序都有这个问题

pages.json配置过了 “pages”: [{ “path”: “pages/index/index”, “style”: { “navigationBarBackgroundColor”: “#FFF”, “navigationBarTitleText”: “某某小程序”, “disableScroll”: true, “enablePullDownRefresh”: true } },


4 回复

是因为配置了 disableScroll: true,整个页面无法滚动所以无法触发了 enablePullDownRefresh。看使用了 scroll-view 做列表数据渲染,scroll-view 自带下拉刷新,可配置 :refresher-enabled=“true” 开启刷新功能,@refresherrefresh 事件监听下拉刷新被触发 参考文档


你pages.json配置去掉"disableScroll": true就可以用原生刷新了

在 uni-app 开发的小程序中,onPullDownRefresh 是用于监听用户下拉刷新事件的 API。如果你在安卓端遇到 onPullDownRefresh 无法触发的问题,可能是由于以下几个原因导致的。你可以根据这些原因逐一排查和解决问题:


1. 页面配置未开启下拉刷新

在 uni-app 中,下拉刷新功能需要在页面的 pages.jsonmanifest.json 中明确配置。如果没有配置,安卓端可能无法触发。

解决方法:pages.json 中为对应的页面配置 enablePullDownRefresh,例如:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "enablePullDownRefresh": true
      }
    }
  ]
}

2. 页面样式问题

如果页面的内容高度不足以触发下拉刷新,安卓端可能无法正常触发。例如,页面内容过少或样式设置导致无法下拉。

解决方法: 确保页面内容足够高,或者为页面设置最小高度。例如:

page {
  min-height: 100vh;
}

3. 下拉刷新的触发区域问题

安卓端对下拉刷新的触发区域可能更严格,如果用户下拉的位置不对,可能无法触发。

解决方法: 确保用户下拉的区域是可滚动区域,并且在页面顶部附近。


4. uni-app 版本问题

某些 uni-app 版本可能存在兼容性问题,导致 onPullDownRefresh 在安卓端无法正常触发。

解决方法: 将 uni-app 更新到最新版本,或者尝试回退到一个稳定的版本。


5. 安卓系统或微信版本问题

某些安卓系统或微信版本可能存在兼容性问题,导致下拉刷新无法触发。

解决方法:

  • 确保微信客户端是最新版本。
  • 在不同的安卓设备和微信版本上测试。

6. 代码逻辑问题

检查 onPullDownRefresh 的实现代码,确保没有逻辑错误或冲突。例如,是否在 onPullDownRefresh 中调用了 uni.stopPullDownRefresh() 导致刷新被停止。

解决方法: 确保 onPullDownRefresh 的实现逻辑正确,例如:

onPullDownRefresh() {
  console.log("下拉刷新触发");
  // 模拟异步操作
  setTimeout(() => {
    uni.stopPullDownRefresh(); // 停止刷新
  }, 2000);
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!