// 组件嵌套方式的上拉,下拉触碰(当前界面只对部分视图进行滚动)
<scroll-view
style="height: 450upx;"
class="scroll-v list"
@scrolltoupper="pullDown"
enableBackToTop="true"
scroll-y
@scrolltolower="loadMore">
放入视图组件
</scroll-view>
pullDown(e){
console.log(e,'下拉')
uni.showToast({
title: '下拉刷新',
duration: 2000
});
},
loadMore(e){
console.log(e,'上拉')
uni.showToast({
title: '上拉加载更多',
duration: 2000
});
},
// 当前界面(不存在引用的外部组件)进行上拉、下拉
1、在pages.json文件中配置,开启下拉刷新
{
"pages": [
{
"path": "pages/index/index",
"style": {
"enablePullDownRefresh": true
}
},
2、在界面中调用生命周期函数
onPullDownRefresh(){
uni.showToast({
title: '下拉刷新',
duration: 2000
});
},
onReachBottom(){
uni.showToast({
title: '上拉加载更多',
duration: 2000
});
},
两种方式类似,区别就是一个利用了生命周期进行监听,一个利用了scroll-view标签。
后续更新上拉加载更多,下拉刷新的功能代码讲解。