b***@163.com
b***@163.com
  • 发布:2024-04-16 22:14
  • 更新:2024-04-17 11:48
  • 阅读:104

【报Bug】onPullDownRefresh 在小程序实际上线后,安卓端不能触发刷新

分类:uni-app

产品分类: 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.getGroupEnterInfo({  
    //  success: (e) => {  
    //      // console.log("shareTicket:", e)  
    //  }  
    // })  

    // 设置分享页面  
    uni.showShareMenu({  
        withShareTicket: true,  
    })  

    // console.log("accessToken", uni.getStorageSync("accessToken"))  
    // let {  
    //  code  
    // } = await uni.login({})  
    // console.log("code:", code)  
})  

onMounted(() => {  
    // 获取选择的地区  
    uni.$on('navbarCitySelected', async (data) => {  
        findParams.value.area = data  
        area.value = data  
        await findTeacher(findParams.value)  
        // console.log("findParams: ", findParams.value)  
    })  
    // 获取选择的科目  
    uni.$on('subjectSelected', async (data) => {  
        findParams.value.subject = data  
        subject.value = data  
        await findTeacher(findParams.value)  
        // console.log("findParams: ", 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>

<style>
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; */  
}  

</style>

操作步骤:

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

预期结果:

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

实际结果:

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

bug描述:

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

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

2024-04-16 22:14 负责人:无 分享
已邀请:
JXWang

JXWang

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

困难总比办法多

困难总比办法多

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

要回复问题请先登录注册