400 76543 55

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

#技术教程 发布时间： 2026-01-18

微信小程序 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" style="height:{{scrollHeight}}px;" 
 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这个接口就是更具传入的页数，每次返回不同数据。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！




上一篇 : JS常用知识点整理

下一篇 : Android用PopupWindow实现自定义Dailog

推荐阅读

电话：400 76543 55
QQ：915688610
邮箱：915688610@qq.com
品牌营销
客服微信
搜索营销
公众号
©  丽景创新 版权所有 赣ICP备2024032158号 
宜昌市隼壹珍商贸有限公司 宜昌市隼壹珍商贸有限公司 宜昌市隼壹珍商贸有限公司 宜昌市隼壹珍商贸有限公司 宜昌市隼壹珍商贸有限公司 宜昌市隼壹珍商贸有限公司 宜昌市隼壹珍商贸有限公司 宜昌市隼壹珍商贸有限公司 宜昌市隼壹珍商贸有限公司 宜昌市隼壹珍商贸有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 内江振祥营销策划有限公司 恩施州毯滚百货有限公司 恩施州毯滚百货有限公司 襄阳市蜂欢商贸有限公司 襄阳市蜂欢商贸有限公司 恩施州换冯百货有限公司 恩施州换冯百货有限公司 恩施州健提百货有限公司 恩施州健提百货有限公司 西安益零商贸有限公司 西安益零商贸有限公司 南奥教育 南奥教育 南奥教育 南奥教育 南昌市南奥教育咨询有限公司 南昌市南奥教育咨询有限公司 南昌市南奥教育咨询有限公司 南昌市南奥教育咨询有限公司 南昌市南奥教育咨询有限公司 南昌市南奥教育咨询有限公司 南昌市南奥教育咨询有限公司 南昌市南奥教育咨询有限公司 南奥教育网 南奥教育网 南奥教育网 南奥教育网 南奥学习网 南奥学习网 南奥学习网 南奥学习网 南奥教育 南奥教育 南奥留学记 南奥留学记 南奥教育 南奥教育 南昌市南奥教育咨询有限公司 南昌市南奥教育咨询有限公司 南昌市南奥教育咨询有限公司 南昌市南奥教育咨询有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 南昌壹佳企网络通信有限公司 广照天下广告 广照天下广告 广照天下广告策划 广照天下广告策划 广照天下 广照天下 广照天下 广照天下 广照天下 广照天下 广照天下广告策划 广照天下广告策划 广照天下广告策划 广照天下广告策划 南昌市广照天下广告策划有限公司 南昌市广照天下广告策划有限公司 南昌市广照天下广告策划有限公司 南昌市广照天下广告策划有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 宿州市腾雀网络科技有限公司 九江市云仁商务咨询有限公司 九江市云仁商务咨询有限公司 九江市云仁商务咨询有限公司 九江市云仁商务咨询有限公司 九江市云仁商务咨询有限公司 九江市云仁商务咨询有限公司 九江市云仁商务咨询有限公司 九江市云仁商务咨询有限公司 九江市云仁商务咨询有限公司 九江市云仁商务咨询有限公司
友情链接：
品牌营销
专业SEO优化
添加左侧专家微信
获取产品详细报价方案
品牌网络推广
搜索营销实战者
专注企业品牌搜索营销