index.wxss
/**
* 数据源来自于rap2 mock数据,调用url: http://rap2.taobao.org:38080/app/mock/262524/get/article/list
*/
Page({
data: {
list: [], // 列表数据
pages: 1, // 当前页数
pageSize: 20, // 每页数据的个数
isLoading: false, // 正在加载中...,默认 false,隐藏
isLoadingMore: false, //没有更多内容了,默认 false,隐藏
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
this.loadData();
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
wx.showLoading({
title: "努力加载中",
});
this.setData({
pages: 1,
list: [],
isLoading: false,
isLoadingMore: false,
});
this.loadData();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
if (this.data.isLoading && !this.data.isLoadingMore) {
this.setData({
pages: t.data.pages + 1, //每次触发上拉事件,把当前页数 pages+1
});
this.loadData();
}
},
/**
* 请求数据封装
*/
loadData: function () {
let t = this;
let pages = t.data.pages,
pageSize = t.data.pageSize;
wx.request({
url: "http://rap2.taobao.org:38080/app/mock/262524/get/article/list",
data: {
pages: pages,
pageSize: pageSize,
},
success: function (res) {
let resData = res.data.data; // 返回的数据
let resNum = resData.length; // 返回的数据列表个数
let list = t.data.list.concat(resData); // 合并数组
// 如果返回的数据列表个数小于每页数据的个数
if (resNum < t.data.pageSize) {
t.setData({
isLoadingMore: true,
isLoading: false,
list: list,
});
} else {
t.setData({
isLoadingMore: false,
isLoading: true,
list: list,
});
}
// 停止加载中动画
wx.hideLoading();
// 停止下拉刷新
wx.stopPullDownRefresh();
},
});
},
});
index.wxml
<view class="article">
<view class="article_box">
<view class="list" wx:for="{{list}}" wx:key="item.id">
<view class="img">
<image src="{{item.image}}"></image>
</view>
<view class="text">
<view class="title">
{{item.title}}
</view>
<text class="author">{{item.author}}</text>
<view class="desc">{{item.desc}}</view>
</view>
</view>
</view>
<view hidden="{{!isLoading}}" class="loadmore loading">正在加载中...</view>
<view hidden="{{!isLoadingMore}}" class="loadmore">没有更多内容了</view>
</view>
index.wxss
page {
background-color: #f1f1f1;
}
.article {
padding-top: 20rpx;
}
.article .article_box{
padding: 0 20rpx;
}
.article_box .list {
background-color: #ffffff;
margin-bottom: 20rpx;
border-radius: 10rpx;
padding: 10rpx;
}
.article_box .list:last-child {
margin-bottom: 0;
}
.article_box .list .img {
width: 100%;
height: 360rpx;
margin-bottom: 10rpx;
}
.article_box .list .img image {
width: 100%;
height: 100%;
}
.article_box .list .text .title {
color: #555;
font-size: 36rpx;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.article_box .list .text .author {
color: #888;
font-size: 24rpx;
}
.article_box .list .text .desc {
color: #555;
font-size: 32rpx;
line-height: 25px;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 加载中动画 */
.loadmore {
color: #888;
font-size: 30rpx;
line-height: 100rpx;
text-align: center;
}
.loadmore.loading::before {
content: '';
width: 40rpx;
height: 40rpx;
margin-top: -10rpx;
margin-right: 10rpx;
display: inline-block;
vertical-align: middle;
animation: loading 1s steps(12) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
background-size: 100%
}
@keyframes loading {
from {
transform: rotate(0deg)
}
to {
transform: rotate(-360deg)
}
}
具体根据自己的接口逻辑去修改
微信开发者工具:列表demo代码片段