PHP前端开发

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

百变鹏仔 5天前 #前端问答
文章标签 实例

这篇文章主要介绍了微信小程序 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这个接口就是更具传入的页数,每次返回不同数据。