微信小程序中scroll-view怎么实现上拉加载与下拉刷新

这篇文章主要讲解了“微信小程序中scroll-view怎么实现上拉加载与下拉刷新”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序中scroll-view怎么实现上拉加载与下拉刷新”吧！

微信小程序 scroll-view实现上拉加载与下拉刷新的实例

实现效果图：

如图，使用小程序的scroll-view实现的上拉加载数据，下拉刷新数据，试下代码如下：

js文件代码：

var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action";  var page = 1;    var GetList = function (that) {   that.setData({   hidden: false   });   wx.request({   url: url,   data: {    pageSize: 10,    pageNo: page   },   success: function (res) {    var l = that.data.list    for (var i = 0; i < res.data.length; i++) {    l.push(res.data[i])    }    that.setData({    list: l    });    page++;    that.setData({    hidden: true    });   }   });  }  Page({   data: {   hidden: true,   list: [],   scrollTop: 0,   scrollHeight: 0   },   onLoad: function () {   var that = this;   wx.getSystemInfo({    success: function (res) {    console.info(res.windowHeight);    that.setData({     scrollHeight: res.windowHeight    });    }   });   },   onShow: function () {   var that = this;   GetList(that);   },   bindDownLoad: function () {   var that = this;   GetList(that);   },   scroll: function (event) {   this.setData({    scrollTop: event.detail.scrollTop   });   },   refresh: function (event) {   page = 1;   this.setData({    list: [],    scrollTop: 0   });   GetList(this)   },   onPullDownRefresh: function () {   console.log("下拉")   },   onReachBottom: function () {   console.log("上拉");   }  })

json文件代码

{   "navigationBarTitleText": "下拉刷新",   "enablePullDownRefresh": true,   "backgroundTextStyle": "dark"  }

wxml文件代码：

<view class="container">   <scroll-view scroll-top="{{scrollTop}}" scroll-y="true"    class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">   <view class="item" wx:for="{{list}}">    <image class="img" src="https://cdn.kuaidi100.com/images/all/56/zhongtong.png"></image>    <view class="text">    <text class="title">{{item.carrierName}}</text>    <text class="description">{{item.carrierTelphone}}</text>    <text class="description">{{item.carrierId}}</text>    </view>   </view>   </scroll-view>   <view class="body-view">   <loading hidden="{{hidden}}" bindchange="loadingChange">    加载中...   </loading>   </view>  </view>

wxss文件代码

.container{   height: 100%;   padding: 20rpx;  }    .item{   display: flex;   margin-bottom: 50rpx;  width:100%;  background:#f0f0f0;  overflow:hidden;  }    .img{   height: 100rpx;   width: 100rpx;   border-radius: 50%;  }    .text{   display: flex;   flex-shrink:1;   flex-grow:1;   padding: 10rpx;   flex-wrap: wrap;   font-size: 50rpx;  }    .title{   font-size: 50rpx;   margin:10rpx 100rpx 10rpx 100rpx;  }  .description{   font-size: 50rpx;   align-self:flex-end;  }

注意，

http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action这个接口就是更具传入的页数，每次返回不同数据。

感谢各位的阅读，以上就是“微信小程序中scroll-view怎么实现上拉加载与下拉刷新”的内容了，经过本文的学习后，相信大家对微信小程序中scroll-view怎么实现上拉加载与下拉刷新这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！