<template>
<list>
<!-- 上拉刷新 -->
<refresh @refresh="onRefresh" :display="refreshIfShow ? 'show' : 'hide'">
<view class="refresh-box"><text class="refresh-text">上拉刷新区域(一秒后我会成功)</text></view>
</refresh>
<cell v-for="(value,key) of 50" :key="key">
<view class="item"><text>{{value}}</text></view>
</cell>
</list>
</template>
<script>
export default {
data() {
return {
refreshIfShow: true
}
},
onLoad() {
},
methods: {
// refresh组件的完成刷新事件
onRefresh(){
this.refreshIfShow = true
//一秒后,输出完成,并且隐藏Refresh组件
setTimeout(() => {
uni.showToast({ title: '刷新成功!', duration: 700});
this.refreshIfShow = false
}, 1000)
}
}
}
</script>
<style>
.item{
height: 50px;
width: 750rpx;
border-width: 1px;
background-color: #C0C0C0;
}
.refresh-box{
background-color: #F0AD4E;
width: 750rpx;
height: 70px;
}
.refresh-text{
line-height: 90px;
text-align: center;
}
</style>
- 发布:2021-02-17 22:23
- 更新:2022-11-10 19:23
- 阅读:1907
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.1.2
手机系统: iOS
手机系统版本号: IOS 14
手机厂商: 苹果
手机机型: Iphone11
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
直接运行代码,
直接运行代码,
预期结果:
与安卓一致,正常完成刷新动作以及触发@refresh事件
与安卓一致,正常完成刷新动作以及触发@refresh事件
实际结果:
不会正常停留,当然,也不会触发@refresh事件
不会正常停留,当然,也不会触发@refresh事件
bug描述:
nvue的refresh组件貌似在ios下不能完成刷新动作,具体表现:不会正常停留,当然,也不会触发@refresh事件
官方文档中有提到,当list组件内容不足时,可能无法操作下拉刷新功能:https://uniapp.dcloud.io/nvue-outline?id=ios%e5%b9%b3%e5%8f%b0%e4%b8%8b%e6%8b%89%e7%bb%84%e4%bb%b6refresh%e7%bb%84%e4%bb%b6%e6%b3%a8%e6%84%8f%e9%97%ae%e9%a2%98
但即使内容铺满,或修改list高度经测算均无法解决问题。不知道是BUG还是哪里写的有问题,还请官方排查一番,附上测试gif图,以及可复现问题的nvue文件