使用jquery-weui制作的下拉刷新和滚动加载

一、前期文件中引入weui.min.css，jquery-weui.min.css，jquery-2.1.4.js，jquery-weui.min.js，fastclick.js这些文件。
二、html代码

	
	
	
	
	
	
	
	
	
	


	

		

			

				

					文字
				
				

					图片
				
				

					动图
				
				

					视频
				
			
		
	
	

		

			

				

				

				
下拉刷新
				
释放刷新
				
正在刷新
			
			

			

				
				正在加载
			
			

				↑ 上拉获取更多 ↑
			
			

				没有更多
			
			

				暂无数据
			
		
	
	
	
	
	
	
	
	
	

三、css代码

body {
background-color: #f3f3f3;
}
body,
html {
height: 100%;
-webkit-tap-highlight-color: transparent;
}
.topSlideMain {
width: 100%;
background: #007AFF;
position: fixed;
top: 0px;
z-index: 100;
}
.swiper-slide {
line-height: 38px;
text-align: center;
color: #FFDD00;
box-sizing: border-box;
}
.topActive {
color: #fff;
border-bottom: 2px solid #fff;
font-size: 15px;
}
.container {
width: 100%;
padding: 50px 0px 0px;
box-sizing: border-box;
height: 100%;
}
.weui-pull-to-refresh{
overflow:auto;
height: 100%;
-webkit-overflow-scrolling:touch;
position: absolute;
}
.container-list {
border-bottom: 1px solid #FFDD00;
padding-bottom: 2%;
margin-bottom: 2%;
width: 92%;
margin:0 auto;
}
.nameDiv {
box-sizing: border-box;
padding: 2% 0px 2%;
}
.nameDiv .left {
width: 40px;
text-align: center;
}
.nameDiv .left img {
width: 40px;
border-radius: 50%;
}
.nameDiv .right {
margin-left: 50px;
float: initial;
}
.commentname {
display: block;
color: #007AFF;
font-size: 14px;
}
.commentime {
color: #007AFF;
font-size: 13px;
}
.contentext {
color: #333;
line-height: 20px;
}
.contentext img {
width: 100%;
}
.contentext video {
width: 100%;
}
.zanDiv,
.commentDiv {
box-sizing: border-box;
padding: 2% 0px 2%;
}
.commentDiv {
padding-left: 5%;
}
.zanDiv img {
width: 16px;
margin-right: 5px;
}
.zanDiv span {
vertical-align: middle;
font-size: 13px;
color: #999;
margin-right: 15px;
}
.commentDiv img {
width: 25px;
border-radius: 50%;
margin-right: 5px;
}
.commentDiv span {
vertical-align: middle;
font-size: 13px;
color: #999;
}
.commentDiv span:first {
color: #333;
}
.btn_top {
height: 44px;
width: 44px;
border-radius: 22px;
background-image: url(…/img/goTop.png);
background-repeat: no-repeat;
background-size: 16px;
background-position: center;
background-color: rgba(1, 21, 25, .24);
position: fixed;
bottom: 60px;
right: 30px;
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.weui-pull-to-refresh__layer {
padding: 0px;
margin-bottom: 10px;
}
.weui-loadmore {
display: none;
}

四、js代码

var type = 2; //默认请求类型
var NextPage = 1; //当前页
var nodata = false; //默认有数据
var ISupLoad = true; //默认是下拉刷新
$(function() {
FastClick.attach(document.body);
loadIndex = layer.open({
type: 2,
content: ‘加载中’
});
loadData(type, NextPage);
//初始化下拉刷新
$("#listwrap").pullToRefresh(function() {
//初始化滚动加载插件
$("#listwrap").infinite();
ISupLoad = true;
loadData(type, NextPage);
});
});
var swiper = new Swiper(’.swiper-container’, { //调用
pagination: ‘.swiper-pagination’, //分页
paginationClickable: false, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
slidesPerView: 3, //设置slider容器能够同时显示的slides数量(carousel模式)。
spaceBetween: 0, //在Slides之间产生间隙。
loop: false, //此参数设置为true时,无限循环切换。
});
$(".swiper-slide").click(function() {
loadIndex = layer.open({
type: 2,
content: ‘加载中’
});
$(".swiper-slide").removeClass(“topActive”);
$(this).addClass(“topActive”);
type = $(this).index() + 2;
NextPage = 1;
$("#result").empty();
$(’#listwrap’).animate({
scrollTop: 0
}, 50);
loadData(type, NextPage);
});
$(’.btn_top’).click(function() {
$(’#listwrap’).animate({
scrollTop: 0
}, 300);
});
function loadData(type, PageIndex) {
var ResultStr = “”;
var postData = {
type: type,
page: PageIndex
};
$.ajax({
type: “get”,
url: “https://www.apiopen.top/satinGodApi”,
data: postData,
dataType: “json”,
cache: false,
//async:false,//同步 true为异步
success: function(data) {
if(data.code == 200) {
if(data.data.length > 0) {
$.each(data.data, function(i, item) {
ResultStr += “

”;
ResultStr += "

";
ResultStr += "

";
ResultStr += " ";
ResultStr += " “;
ResultStr += "

”;
ResultStr += " " + item.username + “”;
ResultStr += " " + item.passtime + “”;
ResultStr += " “;
ResultStr += " “;
if(type == 2) {
ResultStr += “

” + item.text + “

”;
} else if(type == 3) {
ResultStr += “

”;
ResultStr += " ";
ResultStr += “”;
} else if(type == 4) {
ResultStr += “

”;
ResultStr += " ";
ResultStr += “”;
} else if(type == 5) {
ResultStr += “

”;
ResultStr += "

";
ResultStr += " " + item.up + “ " + item.down + “”;
ResultStr += " “;
if(item.top_commentsContent) {
ResultStr += “

”;
ResultStr += " " + item.top_commentsName + " 说： " + item.top_commentsContent + “”;
ResultStr += “”;
}
ResultStr += “”;
});
$("#wait").hide();
$("#uping").show();
if(ISupLoad) {//如果是下拉刷新
$("#result").html(ResultStr);
//重置下拉刷新的状态
$("#listwrap").pullToRefreshDone();
} else {//滚动加载
$("#result").append(ResultStr);
}
} else { //没有数据或者没有更多了
$("#wait").hide();
$("#uping").hide();
$("#noMore").show();
$("#noData").hide();
nodata = true;//没有数据
//销毁滚动加载插件
$("#listwrap").destroyInfinite();
}
} else { //加载失败提示
$("#wait").hide();
$("#uping").hide();
$("#noMore").hide();
$("#noData").hide();
$.alert(data.msg, “提示”);
}
layer.close(loadIndex);
}
});
}
//滚动加载
var upLoading = false; //状态标记
$("#listwrap").infinite().on(“infinite”, function() {
ISupLoad = false;
if(upLoading) return;
upLoading = true;
if(!nodata) {//还有数据
NextPage = NextPage + 1;
$("#noMore").hide();
$("#uping").hide();
$("#noData").hide();
$("#wait").show();
loadData(type, NextPage);
upLoading = false;
}
});
//回到顶部
$("#listwrap").scroll(function() {
var listwrapscrollTop = $("#listwrap").scrollTop();
if(listwrapscrollTop >= 300) {
$(’.btn_top’).fadeIn();
} else {
$(’.btn_top’).fadeOut();
}
});

五、效果图