原生微信小程序 下拉刷新、上拉加载demo代码
一、item-list.wxml
<!--pages/item-list/item-list.wxml-->
<view class="itemList">
<view class="item" wx:for="{{itemList}}" wx:key="{{item.id}}">
<view class="name">{{item.id}}{{item.name}}</view>
<view class="time">{{item.time}}</view>
</view>
<view class="tips">
<view wx:if="{{hasMore}}">
<view class="tips-text">加载更多</view>
</view>
<view wx:else>
<view class="tips-text" wx:if="{{currentPage == 1 && itemList.length ==0}}">暂无信息</view>
<view class="tips-text" wx:else>已经是最后一条啦</view>
</view>
</view>
</view>
二、item-list.js代码
// pages/item-list/item-list.js
var app = getApp()
var api = require('../../utils/httputil.js') //相对路径
Page({
/**
* 页面的初始数据
*/
data: {
itemList:[],
currentPage:1,//当前页
pageSize:10,//一页显示个数
hasMore:false,
downFlag:false,//下拉标识
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getItemListByPage(this.data.currentPage,this.data.pageSize)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
* 下拉刷新
*/
onPullDownRefresh: function () {
this.data.downFlag = true
//在标题栏中显示加载
wx.showNavigationBarLoading()
this.data.currentPage = 1
this.getItemListByPage(this.data.currentPage,this.data.pageSize)
},
/**
* 页面上拉触底事件的处理函数
* 拉加载
*/
onReachBottom: function () {
if(this.data.hasMore){
this.getItemListByPage(this.data.currentPage,this.data.pageSize)
}
},
//分页获取列表数据
getItemListByPage(currentPage,pageSize){
//请求服务器后台API
api.getItemListByPage(currentPage,pageSize).then(res => {
if(res.returnCode == 200){
if(currentPage == 1){
this.data.itemList=[]
}
if(res.data.rows.length>0){
if(parseInt(currentPage)<parseInt(res.data.pages)){
this.data.hasMore =true //赋值未渲染 this.data.params=xx
this.data.currentPage = parseInt(currentPage) +1
}else{
this.data.hasMore =false
}
//遍历
for(var i=0;i<res.data.rows.length;i++){
let obj = res.data.rows[i]
let name = '第'+currentPage+'页'+i
obj.name = name;
this.data.itemList.push(obj)
}
}
//渲染 this.setData
this.setData({
hasMore:this.data.hasMore,
currentPage:this.data.currentPage,
itemList:this.data.itemList
})
if(this.data.downFlag){
this.data.downFlag = false
//处理完成后,终止下拉刷新
wx.stopPullDownRefresh()
//完成 停止加载
wx.hideNavigationBarLoading()
}
}
})
}
})
三、item-list.wxss
/* pages/item-list/item-list.wxss */
.itemList{
width:100%;
background: #f7f7f7;
}
.item{
width:100%;
background-color: #ffffff;
margin-top: 20rpx;
height: 120rpx;
padding-left:20rpx;
}
.name{
display: flex;
flex-direction: row;
font-size: 28rpx;
font-weight: 400;
color:#000000;
padding-top:10rpx;
}
/*时间*/
.time{
font-size: 28rpx;
font-weight: 400;
color:#555555;
margin-top: 20rpx;
}
.tips{
width:100%;
margin-top: 60rpx;
}
.tips-text{
font-size: 28rpx;
text-align: center;
color:#cacaca;
}
四、item-list.json
{
"navigationBarTitleText":"分页 下拉刷新 上拉加载",
"enablePullDownRefresh":true,
"backgroundTextStyle":"dark",
"usingComponents": {}
}
api.getItemListByPage方法请求 我自己本地服务器后台API方法,返回分页结果数据。想要看效果的话,可替换成自己的方法,进行校验。