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

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

相关推荐：

微信小程序列表的上拉加载和下拉刷新的实现

微信小程序实现点击按钮修改字体颜色的功能

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