一、前期文件中引入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();
}
});
五、效果图
