微信小程序 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 <p></p><p>json文件代码</p><p class="jb51code"></p><pre class="brush:js;toolbar:false;">{ 
 "navigationBarTitleText": "下拉刷新", 
 "enablePullDownRefresh": true, 
 "backgroundTextStyle": "dark" 
}

登录后复制

wxml文件代码：

<view> 
 <scroll-view> 
 <view> 
  <image></image> 
  <view> 
  <text>{{item.carrierName}}</text> 
  <text>{{item.carrierTelphone}}</text> 
  <text>{{item.carrierId}}</text> 
  </view> 
 </view> 
 </scroll-view> 
 <view> 
 <loading> 
  加载中... 
 </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这个接口就是更具传入的页数，每次返回不同数据。

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

以上就是微信小程序 scroll-view实现上拉加载与下拉刷新的实例的详细内容，更多请关注GTHOST其它相关文章！