<template>
<view>
<scroll-view
scroll-y
refresher-enabled
refresher-default-style="black"
refresher-background="#fff"
:refresher-triggered="regresherTriggered"
@scrolltolower="scrollBottomHandle"
@refresherrefresh="refresherrefreshHandle"
@refresherabort="refresherabortHandle"
@refresherrestore="refresherrestoreHandle"
@refresherpulling="refresherpullingHandle"
class="scroll-view-st"
>
<navigator url="./"><view v-for="item in dataList" :key="item.id" class="item-st">{{item.id}}</view></navigator>
</scroll-view>
<navigator open-type="navigateBack" :delta="1" class="sfs">back</navigator>
</view>
</template>
<script>
let a = 0
export default {
data() {
return {
regresherTriggered: false,
dataList: [],
loading: false,
freshing: false
}
},
onLoad() {
console.log('sss onload')
this.getList()
},
methods: {
// 滚定到底部触发
scrollBottomHandle() {
console.log('滚定到底部触发')
this.getList()
},
// 下拉刷新触发
refresherrefreshHandle() {
if (this.freshing) return
this.freshing = true
console.log('下拉刷新触发')
this.regresherTriggered = true
this.dataList = []
this.loading = false
a = 0
this.getList()
},
// 自定义下拉刷新被中止
refresherabortHandle() {
console.log('自定义下拉刷新被中止')
},
// 自定义下拉刷新被复位
refresherrestoreHandle() {
console.log(' 自定义下拉刷新被复位')
// this.regresherTriggered = 'restore'
},
// 自定义下拉刷新控件被下拉
refresherpullingHandle() {
console.log('自定义下拉刷新控件被下拉')
},
getList() {
console.log('调用了加载数据')
if (this.loading) return
this.loading = true
// this.regresherTriggered = true
setTimeout(() => {
console.log('请求道了数据')
let arr = []
a++
console.log('当前请求了第' + a + '页')
for (let i = 0; i < 15; i++) {
arr.push({ id: `${a}-${i}` })
}
this.regresherTriggered = false
this.dataList = [...this.dataList, ...arr]
this.loading = false
this.freshing = false
}, 500)
}
}
}
</script>
<style lang="scss">
.scroll-view-st {
height: 100vh;
}
.item-st {
height: 180rpx;
background-color: green;
margin-bottom: 10rpx;
}
.sfs {
position: fixed;
left: 10rpx;
top: 50%;
}
</style>
- 发布:2020-06-08 14:59
- 更新:2020-09-16 11:14
- 阅读:2361
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows10
HBuilderX类型: 正式
HBuilderX版本号: 2.7.9
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: p20
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
运行如上代码,按BUG 描述
步骤即可复现
运行如上代码,按BUG 描述
步骤即可复现
预期结果:
bug1:正常下滑不触发下拉刷新事件
<br>
bug2:兼容报错
<br>
bug1:正常下滑不触发下拉刷新事件
<br>
bug2:兼容报错
<br>
实际结果:
bug1:轻轻往下一划就触发了下拉刷新
<br>
bug1:轻轻往下一划就触发了下拉刷新
<br>
bug描述:
自定义基座运行:bug1:scroll-view 上拉触底加载到新一页的数据,往下轻轻一划就触发了下拉刷新事件?
<br>
bug2:上滑过程中,手指1安装屏幕,其次手指2按住屏幕,手指1松开屏幕,报错:Uncaught TypeError: Cannot read property 'y' of null at view.umd.min.js:6
<br>
bug3:@scrolltolower 似乎有时不触发?
研究了好久,突然灵光一闪,找到解决办法了,分享一下:
其实很简单
2 - 在scroll绑定的方法中,获取滚动值,===0开启下拉刷新,否则禁用
@scroll="scroll"
scroll(e) {
if (e.detail.scrollTop === 0) {
this.scroll_refresher_enabled = true
} else {
this.scroll_refresher_enabled = false
}
}
3***@qq.com
老哥,有用唉
2021-06-23 16:49