网上看了好多，我也参考了好多，不过总结了大家的经验还是做出来了，前提是你有了小程序的基础，废话不多说。我这里是tp5小程序的，先上预览图，因为是PC端测试，拍不成高清图，讲究看一下：
前端wxml代码：
<view class="page-body">
<navigator url='../info/info?id={{item.id}}' wx:for="{{list}}" wx:key="{{list}}">
<view class='newstype-item'>
<image src='{{item.litpic}}' class='pic' mode='aspectFill'></image>
<view class='newstype-item-right'>
<text class='newstype-item-maintext'>{{item.title}}</text>
<view class='newstype-item-bottom'>
<text class='newstype-item-smalltext'>{{item.time}}</text>
<view class='newstype-item-bottom-right'>
<image src="/images/icon_look.png" style="width:34rpx;height:34rpx"></image>
<view class='newstype-item-smalltext' style="margin-left:10rpx; font-size: 20rpx; margin-bottom:1rpx">{{item.click}}</view>
</view>
</view>
</view>
</view>
</navigator>
<view class="weui-loadmore" hidden="{{!hasMoreData}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<view class='data-bottom' hidden='{{!bottomTitle}}'>{{title}}</view>
</view>js代码部分：
var app = getApp();
var url = app.d.ceshiUrl + 'tuijian';
var page = 1;
var page_size = 6;
//获取数据集
var getData = function(that) {
that.setData({
hasMoreData: false
});
wx.request({
url: url,
method: 'post',
data: {
page: page,
page_size: page_size
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
if (res.data.status === 0) {
wx.showToast({
title: '没有更多数据了',
icon: 'success'
});
that.setData({
hasMoreData: false
});
} else {
console.log('下拉滑到这了');
that.setData({
list: that.data.list.concat(res.data.list),
hasMoreData: true
});
}
},
fail: function() {
wx.showToast({
title: '网络错误',
duration: 2000
})
},
complete: function() {
setTimeout(function() {
//隐藏导航栏加载
wx.hideNavigationBarLoading();
//停止下拉动作
wx.stopPullDownRefresh();
}, 1500);
}
});
}
Page({
data: {
list: [],
hasMoreData: true,
bottomTitle: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function() {
var that = this;
getData(that);
},
/**
* 页面上拉加载更多
*/
onReachBottom: function() {
var that = this;
//如果是上拉，那么page必须是+1
++page;
if (that.data.hasMoreData) {
//wx.showLoading({
//title: '拼命加载中...',
//})
setTimeout(function() {
getData(that);
wx.hideLoading()
}, 1000)
} else {
//wx.showToast({
//title: '我是有底线的',
//icon: 'none'
//})
that.setData({
bottomTitle: true,
title: '-- 我是有底线的 --'
})
}
},
/**
* 页面下拉刷新
*/
onPullDownRefresh: function() {
wx.showNavigationBarLoading();
page = 1; //刷新后从第一页开始
this.setData({
list: [],
hasMoreData: true,
bottomTitle: false
})
getData(this);
console.log('下拉刷新了');
}
})wxcss部分：
page {
background-color: #F8F8F8;
height: 100%;
font-size: 32rpx;
line-height: 1.6;
}
.page-body{
display: flex;
flex: 1;
flex-direction: column;
background: #fff;
}
.newstype-list{
display: flex;
flex-direction: column;
}
.newstype-item{
display: flex;
flex-direction: row;
margin-top: 2rpx;
width: 750rpx;
height: 194rpx;
justify-content: flex-start;
border-bottom: 1px solid #d8d8d8;
}
.newstype-item .pic{
width: 220rpx;
height: 160rpx;
margin:17rpx 0 0 20rpx;
}
.newstype-item-right{
margin-top: 17rpx;
display: flex;
flex-direction: column;
margin-left: 30rpx;
width: 460rpx;
height: 160rpx;
justify-content: space-between;
}
.newstype-item-maintext{font-size: 28rpx;}
.newstype-item-bottom{
background: #fff;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
.newstype-item-bottom-right{
display: flex;
flex-direction: row;
align-items: center;
}
.newstype-item-smalltext{
display: flex;
color: #999;
font-size: 25rpx;
}
.data-bottom {
height: 70rpx;
line-height: 70rpx;
background-color: #eee;
text-align: center;
font-size: 26rpx;
color: #ccc;
margin-top: 20rpx;
} 至于后端API的话，如果你懂tp5程序的话，就可以自己搞了，我就不多说了，转载请注明作者，谢谢！
380
