微网站—上拉、下拉刷新（重新请求数据）

页面源码



  
  
  demo
  


  

      

        

            
                
                
1文字描述文字描述
                2015-11-27
            
            
                
                
2文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述
                2015-11-27
            
            
                
                
3文字描述文字描述文字描述文字描述文字描述
                2015-11-27
            
            
                
                
4文字描述文字描述文字描述文字描述文字描述
                2015-11-27
            
            
                
                
5文字描述文字描述文字描述文字描述文字描述
                2015-11-27
            
        
    

index.js
// dropload
var dropload = $('.inner').dropload({
  domUp : {
      domClass   : 'dropload-up',
      domRefresh : '
↓下拉刷新
',
      domUpdate  : '
↑释放更新
',
      domLoad    : '
加载中...
'
  },
  domDown : {
      domClass   : 'dropload-down',
      domRefresh : '
↑上拉加载更多
',
      domUpdate  : '
↓释放加载
',
      domLoad    : '
加载中...
'
  },
  loadUpFn : function(me){
      alert("上拉刷新操作");
      me.resetload();
  },
  loadDownFn : function(me){
       alert("下拉刷新操作");
       me.resetload();
  }
});

domUp : {
      domClass   : 'dropload-up',
      domRefresh : '
↓下拉刷新
',
      domUpdate  : '
↑释放更新
',
      domLoad    : '
加载中...
'
  },
  domDown : {
      domClass   : 'dropload-down',
      domRefresh : '
↑上拉加载更多
',
      domUpdate  : '
↓释放加载
',
      domLoad    : '
加载中...
'
  },

.dropload-up,
.dropload-down {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}
.dropload-refresh,
.dropload-update,
.dropload-load {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0)
}
.dropload-down .dropload-refresh,
.dropload-down .dropload-update,
.dropload-down .dropload-load {
  top: 0;
  bottom: auto
}
.dropload-load .loading {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 100%;
  margin: 6px;
  border: 2px solid #666;
  border-bottom-color: transparent;
  vertical-align: middle;
  -webkit-animation: rotate .75s linear infinite;
  animation: rotate .75s linear infinite
}
@-webkit-keyframes rotate {
  0% {
      -webkit-transform: rotate(0deg)
  }
  50% {
      -webkit-transform: rotate(180deg)
  }
  100% {
      -webkit-transform: rotate(360deg)
  }
}
@keyframes rotate {
  0% {
      transform: rotate(0deg)
  }
  50% {
      transform: rotate(180deg)
  }
  100% {
      transform: rotate(360deg)
  }
}