【小程序开发】上拉加载更多demo

wxml：

<scroll-view class='swiper-scroll' scroll-y="{{true}}" bindscrolltolower="lower" style='height:800rpx;'>

<block wx:for="{{requestRes}}" wx:key="item" wx:for-index="idx">

<view>

<image style='width:100rpx;height:100rpx;' src="{{requestRes[idx].avatar}}" alt=""></image>

</view>

<view>{{requestRes[idx].description}}</view>

<view><text>￥<text>{{item.price}}</text></text><text>￥{{item.oldprice}}</text></view>

</block>

<view class="tips1">

<view wx:if="{{hasMore}}">

<text>玩命的加载中...</text>

</view>

<view wx:else>

<text>没有更多内容了</text>

</view>

</view>

</scroll-view>

 

js：

 

//index.js

//获取应用实例

var app = getApp()

var http = app.globalData.http

Page({

data: {

requestRes: {},

pagel: 1, // 发出的 页数

hasMore: false

},

// 触底加载数据

lower: function (e) {

console.log('kaihsi')

this.setData({

hasMore: true

})

this.loaddatal();

},

onLoad: function (option) {

var that = this

// 请求数据

wx.request({

url: 'http://cloud.topmdrt.com/api/v1/activity/goods_praise/page',

method: 'get',

data: {

currentPage: this.data.pagel,

sourceId: 2,

id: 83

},

success: function (res) {

console.log(res)

that.setData({

requestRes: res.data.response.dataList

})

}

})

},

// 发出的数据 加载

loaddatal: function () {

console.log('chufa')

var listData = this.data.requestRes;

var that = this;

var pag = this.data.pagel + 1;

wx.request({

url: 'http://cloud.topmdrt.com/api/v1/activity/goods_praise/page',

method: 'get',

data: {

currentPage: pag,

sourceId: 2,

id: 83

},

success: function (res) {

var pagel = that.data.pagel + 1;

if (res.data.response.dataList.length == 0) {

this.setData({

requestRes: res.data.response.dataList,

pagel: -1

})

return false;

}

that.setData({

pagel: pagel,

requestRes: listData.concat(res.data.response.dataList),

hasMore: false

})

// that.update()

}

})

}

})

 

wxss：

/**上拉加载更多**/

.tips1{

height: 60rpx;

line-height: 60rpx;

color: #999;

font-size: 21rpx;

text-align: center;

}

/* */

.minearea image {

text-align: center;

display: block;

}

.minearea {

text-align: center;

line-height: 3.2rem;

}

.page-section {

width: 76%;

margin: auto;

margin-top: 36rpx;

}

.weui-input {

border: solid 1px #e6e6e6;

height: 90rpx;

border-radius: 2rpx;

padding-left: 20rpx;

padding-right: 20rpx;

">#f5f5f5;

color: #333;

}

.page-body {

margin-top: 120rpx;

}

.page-section-title {

color: #333;

font-size: 32rpx;

padding-left: 0rpx;

}

.placeholder {

color: #cbcbcb;

}

.btn-area {

margin-top: 90rpx;

}