【移动应用开发技术】小程序中scroll-view实现上拉加载与下拉刷新的示例

【移动应用开发技术】小程序中scroll-view实现上拉加载与下拉刷新的示例

这篇文章主要介绍小程序中scroll-view实现上拉加载与下拉刷新的示例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！微信小程序scroll-view实现上拉加载与下拉刷新的实例实现效果图：如图，使用小程序的scroll-view实现的上拉加载数据，下拉刷新数据，试下代码如下：js文件代码：var

url

=

":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)

{

(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="/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

10rp