小程序列表的上拉加载和下拉刷新的实现方法：

1.介绍几个组件

1.1 scroll-view 组件

注意：使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

1.2 image组件

注意：mode有12种模式，其中3种是缩放模式，9种是裁剪模式。

1.3 Icon组件

iconType: [ 
‘success', ‘info', ‘warn', ‘waiting', ‘safe_success', ‘safe_warn', 
‘success_circle', ‘success_no_circle', ‘waiting_circle', ‘circle', ‘download', 
‘info_circle', ‘cancel', ‘search', ‘clear' 
]

2.列表的上拉加载和下拉刷新的实现

2.1先来张效果图

2.2逻辑很简单，直接上代码

2.2.1 detail.wxml 布局文件

 加载中...
  
 
 
 刷新中...
 
 
 
  
  标题:{{item.title}}
  来源:{{item.source}}
 


 
 玩命的加载中...
 没有更多内容了
 
 

2.2.1 detail.js逻辑代码文件

var network_util = require('../../utils/network_util.js');
var json_util = require('../../utils/json_util.js');
Page({
 data:{
 // text:"这是一个页面"
 list:[],
 dd:'',
 hidden:false,
 page: 1,
 size: 20,
 hasMore:true,
 hasRefesh:false
 },
 onLoad:function(options){
 var that = this;
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 });
 },function(res){
 console.log(res);
 });
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 },
 //点击事件处理
 bindViewTap: function(e) {
 console.log(e.currentTarget.dataset.title);
 },
 //加载更多
 loadMore: function(e) {
 var that = this;
 that.setData({
 hasRefesh:true,});
 if (!this.data.hasMore) return
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list: that.data.list.concat(res.data.result.list),
 hidden: true,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
//刷新处理
refesh: function(e) {
 var that = this;
 that.setData({
 hasRefesh:true,
 });
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 page:1,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
})

最后的效果：

关于新闻的详情实现，后面在实现