1、wxml代码
<!-- 数据列表 -->
<scroll-view class="box-scroll" scroll-y='true' refresher-enabled="true" refresher-threshold="{{100}}" refresher-default-style="black" refresher-background="white" refresher-triggered="{{triggered}}" bindrefresherrefresh="onScrollRefresh" bindscrolltolower="bindscrolltolowerFn">
<view>
</view>
<view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view>
<view class="loading" hidden="{{!searchLoadingComplete}}">已加载全部</view>
</scroll-view>
2、js代码文章来源:https://www.toymoban.com/news/detail-506238.html
Page({
data: {
List: [],
patientId: '',
// 刷新加载配置
triggered: false,
searchLoading:false,
searchLoadingComplete:false,
scrollTop:20,
ok:10
},
//用户下拉动作
onScrollRefresh: function () {
var that=this;
setTimeout(function(){
that.setData({
triggered: false,
})
},2000);
},
//上拉加载
bindscrolltolowerFn: function(){
// getStuList为请求服务端数据方法
var that=this;
that.setData({
searchLoading: true,
})
console.log("====上拉加载======")
setTimeout(function(){
that.setData({
searchLoading: false,
ok:20
})
},2000);
},
})
3、需要注意的是当前页面最外层元素的样式里要加上overflow:scroll 或者 overflow-y: scroll 否则scroll-view上的方法不起作用文章来源地址https://www.toymoban.com/news/detail-506238.html
到了这里,关于微信小程序scroll-view下拉刷新与上拉加载更多的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!