文件路径根据自己的项目进行修改，里面涉及的上拉加载更多的uni-load-more.vue组件，到官方组件里下载使用。
- 需要在pages.json里配置
{
"path": "pages/news/news",
"style": {
"navigationBarTitleText": "新闻中心",
"enablePullDownRefresh": true
}
}
2. 自己写的json数据,代码如下：
news.json
{
"data":[
{"id":"0","title":"1双龙聚凤 璀璨人生翡翠 色泽光鲜色彩伊人","public_time":"2019-01-01","img":"/static/paint1.png",
"content":"科普推广：科学知识、科学思维方法、科学态度。将“科学知识原理”转化为趣味性、游戏化、生活化的课程，深入浅出，将科学知识还原为最浅显的生活原理，最深层次激发孩子的联想，培养和建立能力素质。"},
{"id":"1","title":"2天然缅甸翡翠 外形简洁饱满 异常圆润 意钱财滚滚来","public_time":"2019-01-01","img":"/static/paint2.png",
"content":"科普推广：科学知识、科学思维方法、科学态度。将“科学知识原理”转化为趣味性、游戏化、生活化的课程，深入浅出，将科学知识还原为最浅显的生活原理，最深层次激发孩子的联想，培养和建立能力素质。"},
{"id":"2","title":"3双龙聚凤 璀璨人生翡翠 色泽光鲜色彩伊人","public_time":"2019-01-01","img":"/static/paint1.png",
"content":"科普推广：科学知识、科学思维方法、科学态度。将“科学知识原理”转化为趣味性、游戏化、生活化的课程，深入浅出，将科学知识还原为最浅显的生活原理，最深层次激发孩子的联想，培养和建立能力素质。"},
{"id":"3","title":"4天然缅甸翡翠 外形简洁饱满 异常圆润 意钱财滚滚来","public_time":"2019-01-01","img":"/static/paint2.png",
"content":"科普推广：科学知识、科学思维方法、科学态度。将“科学知识原理”转化为趣味性、游戏化、生活化的课程，深入浅出，将科学知识还原为最浅显的生活原理，最深层次激发孩子的联想，培养和建立能力素质。"},
{"id":"4","title":"5天然缅甸翡翠 外形简洁饱满 异常圆润 意钱财滚滚来","public_time":"2019-01-01","img":"/static/w8.png",
"content":"科普推广：科学知识、科学思维方法、科学态度。将“科学知识原理”转化为趣味性、游戏化、生活化的课程，深入浅出，将科学知识还原为最浅显的生活原理，最深层次激发孩子的联想，培养和建立能力素质。"},
{"id":"5","title":"6天然缅甸翡翠 外形简洁饱满 异常圆润 意钱财滚滚来","public_time":"2019-01-01","img":"/static/paint2.png",
"content":"科普推广：科学知识、科学思维方法、科学态度。将“科学知识原理”转化为趣味性、游戏化、生活化的课程，深入浅出，将科学知识还原为最浅显的生活原理，最深层次激发孩子的联想，培养和建立能力素质。"},
{"id":"6","title":"7天然缅甸翡翠 外形简洁饱满 异常圆润 意钱财滚滚来","public_time":"2019-01-01","img":"/static/banner.png",
"content":"科普推广：科学知识、科学思维方法、科学态度。将“科学知识原理”转化为趣味性、游戏化、生活化的课程，深入浅出，将科学知识还原为最浅显的生活原理，最深层次激发孩子的联想，培养和建立能力素质。"},
{"id":"7","title":"8天然缅甸翡翠 外形简洁饱满 异常圆润 意钱财滚滚来","public_time":"2019-01-01","img":"/static/paint2.png",
"content":"科普推广：科学知识、科学思维方法、科学态度。将“科学知识原理”转化为趣味性、游戏化、生活化的课程，深入浅出，将科学知识还原为最浅显的生活原理，最深层次激发孩子的联想，培养和建立能力素质。"},
{"id":"8","title":"9天然缅甸翡翠 外形简洁饱满 异常圆润 意钱财滚滚来","public_time":"2019-01-01","img":"/static/banner.png",
"content":"科普推广：科学知识、科学思维方法、科学态度。将“科学知识原理”转化为趣味性、游戏化、生活化的课程，深入浅出，将科学知识还原为最浅显的生活原理，最深层次激发孩子的联想，培养和建立能力素质。"}
],
"pages_count":"9"
}
**
3. news.vue
**
<template>
<view>
<view class="list" v-for="(item,index) in newsList" :key="index">
<view class="list-left">
<image :src="item.img"></image>
</view>
<view class="list-right">
<view class="list-top">
<text class="elli">{{item.title}}</text>
<text>{{item.public_time}}</text>
</view>
<view class="list-con elli3">{{item.content}}</view>
</view>
</view>
<text class="loading-text">
{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}</text>
</view>
</template>
<script>
import uniLoadMore from '../../components/uni-load-more.vue';
var _self,
page = 1;
export default{
components: {uniLoadMore},
data(){
return{
newsList:[],
loadingType: 0,
contentText: {
contentdown: "上拉显示更多",
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了"
}
}
},
onLoad: function (options) {
_self = this;
this.getNewsList();
},
// 下拉刷新
onPullDownRefresh() {
this.getNewsList();
},
// 上拉加载
onReachBottom: function() {
console.log(_self.newsList.length);
if (_self.loadingType != 0) {//loadingType!=0;直接返回
return false;
}
_self.loadingType = 1;
uni.showNavigationBarLoading();//显示加载动画
uni.request({
url:'../../static/data/news.json?page='+page,
success: function(res) {
if (_self.newsList.length==res.data.pages_count) {//没有数据
_self.loadingType = 2;
uni.hideNavigationBarLoading();//关闭加载动画
return false;
}
page++;//每触底一次 page +1
// console.log(page);
for(var i=_self.newsList.length;i<res.data.pages_count;i++){
_self.newsList = _self.newsList.concat(res.data.data[i]);//将数据拼接在一起
}
_self.loadingType = 0;//将loadingType归0重置
uni.hideNavigationBarLoading();//关闭加载动画
}
});
},
methods:{
getNewsList: function() {//第一次回去数据
_self.loadingType = 0;
uni.showNavigationBarLoading();
uni.request({
url: '../../static/data/news.json?page=1',
success: function(res) {
let newsList =[];
for(var i=0;i<6;i++){
newsList.push(res.data.data[i]);
}
_self.newsList = newsList;
if(res.data.pages_count==res.data.data.length){
uni.showToast({
title: '已是最新',
duration: 2000
});
}
uni.hideNavigationBarLoading();
uni.stopPullDownRefresh();//得到数据后停止下拉刷新
}
});
}
}
}
</script>
<style lang="scss">
.elli{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.elli2{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.elli3{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.list{
width: 94%;
display: flex;
flex-direction: row;
padding: 3%;
border-bottom: 1upx solid #ebe8e8;
.list-left{
width: 35%;
margin-right: 3%;
image{
width: 220upx;
height: 140upx;
padding: 3%;
border: 1upx solid #ebe8e8;
box-sizing: border-box;
}
}
.list-right{
width: 65%;
color: #999999;
font-size: 24upx;
.list-top{
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: 5upx;
text{
&:nth-child(1){
color: #333;
font-size: 30upx;
width: 65%;
}
}
}
}
}
.loading-text{
height: 80upx;
line-height: 80upx;
font-size: 30upx;
display: flex;
flex-direction: row;
justify-content: space-around;
}
</style>