使用jquery-weui製作的下拉重新整理和滾動載入
一、前期檔案中引入weui.min.css，jquery-weui.min.css，jquery-2.1.4.js，jquery-weui.min.js，fastclick.js這些檔案。
二、html程式碼
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="shortcut icon" type="image/x-icon" href="./img/logo.png" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>胡門段友</title> <link rel="stylesheet" type="text/css" href="./css/swiper.min.css" /> <link rel="stylesheet" href="css/weui.min.css" /> <link rel="stylesheet" href="css/jquery-weui.min.css" /> <link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body ontouchstart> <div class="topSlideMain"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide topActive"> 文字 </div> <div class="swiper-slide"> 圖片 </div> <div class="swiper-slide"> 動圖 </div> <div class="swiper-slide"> 視訊 </div> </div> </div> </div> <div class="container"> <div class="weui-pull-to-refresh" id="listwrap"> <div class="weui-pull-to-refresh__layer"> <div class='weui-pull-to-refresh__arrow'></div> <div class='weui-pull-to-refresh__preloader'></div> <div class="down">下拉重新整理</div> <div class="up">釋放重新整理</div> <div class="refresh">正在重新整理</div> </div> <div id="result"></div> <div class="weui-loadmore" id="wait"> <i class="weui-loading"></i> <span class="weui-loadmore__tips">正在載入</span> </div> <div class="weui-loadmore weui-loadmore_line" id="uping"> <span class="weui-loadmore__tips">↑ 上拉獲取更多 ↑</span> </div> <div class="weui-loadmore weui-loadmore_line" id="noMore"> <span class="weui-loadmore__tips">沒有更多</span> </div> <div class="weui-loadmore weui-loadmore_line" id="noData"> <span class="weui-loadmore__tips">暫無資料</span> </div> </div> </div> <a href="javascript:;" class="btn_top" style="display: none;"></a> <script src="./js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script> <script src="./js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="js/jquery-weui.min.js" charset="utf-8"></script> <script type="text/javascript" src="./js/fastclick.js" charset="utf-8"></script> <script type="text/javascript" src="js/common.js" charset="utf-8"></script> <script type="text/javascript" src="js/layer_mobile/layer.js" charset="utf-8"></script> <script type="text/javascript" src="js/index.js" charset="utf-8"></script> </body>
三、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 += “<div class=“container-list”>”;
ResultStr += " <div class=“nameDiv”>";
ResultStr += " <div class=“left”>";
ResultStr += " <img src="" + item.header + “” onerror=“myImgError(this)”/>";
ResultStr += " “;
ResultStr += " <div class=“right”>”;
ResultStr += " <span class=“commentname”>" + item.username + “”;
ResultStr += " <span class=“commentime”>" + item.passtime + “”;
ResultStr += " “;
ResultStr += " “;
if(type == 2) {
ResultStr += “<p class=“contentext”>” + item.text + “
} else if(type == 3) {
ResultStr += “<p class=“contentext”>”;
ResultStr += " <img src=”” + item.image + “” onerror=“ImgError(this)”/>";
ResultStr += “”;
} else if(type == 4) {
ResultStr += “<p class=“contentext”>”;
ResultStr += " <img src="" + item.gif + “” onerror=“ImgError(this)”/>";
ResultStr += “”;
} else if(type == 5) {
ResultStr += “<p class=“contentext”>”;
ResultStr += " <video src="" + item.video + “”>";
ResultStr += “”;
}
ResultStr += " <p class=“zanDiv”>";
ResultStr += " <img src="./img/zan.png" /> " + item.up + “<img src=”./img/diszan.png" /> " + item.down + “”;
ResultStr += " “;
if(item.top_commentsContent) {
ResultStr += “<div class=“commentDiv”>”;
ResultStr += " <img src=”" + item.top_commentsHeader + “” onerror=“myImgError(this)”/> " + 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();
}
});
五、效果圖
