如图,使用小程序的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"
- }
- <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这个接口就是更具传入的页数,每次返回不同数据。