通过Page页面事件监听下拉刷新事件、上拉触底事件
xxx.json
{
"enablePullDownRefresh" : false ,
"onReachBottomDistance" : 200
}
xxx.js
Page ( {
...
onPullDownRefresh : function ( ) {
console. log ( "onPullDownRefresh" ) ;
} ,
onReachBottom : function ( ) {
console. log ( "onReachBottom" ) ;
} ,
...
} )
通过scroll-view监听下拉刷新事件、上拉触底事件
xxx.wxml
< view class = " container" >
< view class = " page-body" >
< view class = " page-section" >
< view class = " page-section-title" >
< text> Vertical Scroll\n纵向滚动</ text>
</ view>
< view class = " page-section-spacing" >
< scroll-view scroll-y = " true" style = " height : 300rpx; " bindscrolltoupper = " onUpper" bindscrolltolower = " onLower" refresher-enabled = " {{true}}" refresher-triggered = " {{refreshing}}" >
< view id = " demo1" class = " scroll-view-item demo-text-1" > </ view>
< view id = " demo2" class = " scroll-view-item demo-text-2" > </ view>
< view id = " demo3" class = " scroll-view-item demo-text-3" > </ view>
</ scroll-view>
</ view>
</ view>
</ view>
</ view>
bindscrolltoupper: 滚动到顶部时触发。当scroll-view横向时,滚动到左边时触发。 bindscrolltolower: 滚动到底部时触发。当scroll-view横向时,滚动到右边时触发。 refresher-enabled: true 开启自定义下拉刷新,false 不开启下拉刷新 refresher-triggered: 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
xxx.js
Page ( {
data : {
refreshing : false
} ,
...
onUpper : function ( ) {
console. log ( 'onUpper' )
that. setData ( {
refreshing : false
} ) ;
} ,
onLower : function ( ) {
console. log ( 'onLower' )
} ,
...
} )
参考
小程序 >微信小程序 框架接口:Page 小程序 >微信小程序 页面配置 小程序 >微信小程序 组件:scroll-view