vant实现下拉刷新和上拉加载_微信小程序 - 实现下拉刷新、上拉加载

在小程序开发中使用下拉刷新和上拉加载非常多，比如常用的展示型首页，而实现这个功能有两种形式，第一种是使用 scroll-view 组件，第二种是不使用 scroll-view 组件而让整个页面刷新，那就分别都在此简单分享下。

方法一

在 scroll-view 里设定 bindscrolltoupper 和 bindscrolltolower 监听页面滑动到顶部和底部，调用两个方法然后分别根据自己业务逻辑处理即可。

详情见 scroll-view 组件

直接上代码

注意使用竖向滚动时，需要给 <scroll-view/> 一个固定高度才能监听滚动事件，通过 WXSS 设置 height 。

index.wxml

<!--index.wxml-->
<view><scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll"><view class="item" wx:for="{{list}}"><image class="img" src="{{item.pic_url}}"></image><view class="text"><text class="title">{{item.name}}</text><text class="description">{{item.short_description}}</text></view></view></scroll-view><view class="body-view"><loading hidden="{{hidden}}" bindchange="loadingChange">加载中...</loading></view>
</view>

index.js

var url = "https://xxx";
var page = 1;
var page_size = 5;// 请求数据
var loadMore = function (that) {that.setData({hidden: true});wx.request({url: url,data: {page: page,page_size: page_size,},header: {'content-type': 'application/json'},success: function (res) {var list = that.data.list ;for(var i = 0; i < res.data.data.length; i++){list.push(res.data.data[i]);}that.setData({list: list});page++;that.setData({hidden: false});}});
}Page({data: {hidden: true,list: [],scrollTop: 0,scrollHeight: 0},onLoad: function () {//注意 scroll-view 必须要设置高度才能监听滚动事件，需要在页面的onLoad事件中给scroll-view的高度赋值var that = this;wx.getSystemInfo({success: function (res) {that.setData({scrollHeight: res.windowHeight});}});loadMore(that);},//下拉加载bindDownLoad: function () {var that = this;loadMore(that);},scroll: function (event) {//该方法绑定了页面滚动时的事件，这里记录了当前的 position.y 的值,为了请求数据之后把页面定位到这里来。this.setData({scrollTop: event.detail.scrollTop});},//上拉刷新topLoad: function (event) {var that = this;//数据刷新page = 0;this.setData({page: 1,list: [],scrollTop: 0});loadMore(that);}
})

方法二

整个页面的刷新，使用 onPullDownRefresh 和 onReachBottom 。但是在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在 app.json 中的设置对所有页面有效，在单独页面设置则对当前页面有效。

详情见 Page 页面

有人说设置完之后可以下拉，但是看不到图标，需要再设置下拉 loading 样式。

{"window":{"backgroundTextStyle": "dark","enablePullDownRefresh": true}
}

直接上代码

下拉刷新

  // 下拉刷新  onPullDownRefresh: function () {// 显示顶部刷新图标  wx.showNavigationBarLoading();var that = this;wx.request({url: 'https://xxx',method: "POST",data:{page : page,page_size : page_size,},header: {'content-type': 'application/json'},success: function (res) {that.setData({moment: res.data.data});// 设置数组元素  that.setData({moment: that.data.moment});// 隐藏导航栏加载框  wx.hideNavigationBarLoading();// 停止下拉动作  wx.stopPullDownRefresh();}})},

上拉加载更多

  //上拉加载onReachBottom: function () {var that = this;// 显示加载图标  wx.showLoading({title: '加载中...',})page++;;wx.request({url: 'https://xxx/'，method: "POST",data:{page : page,page_size : page_size,},header: {'content-type': 'application/json'},success: function (res) {// 回调函数  var moment_list = that.data.moment;for (var i = 0; i < res.data.data.length; i++) {moment_list.push(res.data.data[i]);}// 设置数据  that.setData({moment: that.data.moment})// 隐藏加载框  wx.hideLoading();}})},

参考以上例子就可以下拉刷新、上拉加载，示例仅提供一个思路，具体的实现需要开发者根据自己项目来定。

码字不易，转载请注明出处。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/429474.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！