先上图
代码实现:
用的是dropload插件实现的
后台取数据:
/**微信activity json 查询*/
@ResponseBody
@RequestMapping(value = "ajaxActivity")
public PageInfo getajaxlist(Integer no,Integer pageSize,HttpServletRequest request){
PageHelper.startPage(no,10);
List<ActBaseinfo> insList = activityService.selectAll();
SimpleDateFormat simpleDateFormat= new SimpleDateFormat("yyyy-MM-dd");
for(ActBaseinfo a :insList){
a.setActtime1(simpleDateFormat.format(a.getActtime()));
}
PageInfo page = new PageInfo(insList);
return page;
}
前台展现:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://img.ybl-group.com/mescroll/1.3.8/mescroll.min.css">
<#include "_head.ftl">
<style>
*{
margin: 0;
padding:0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
}
html{
font-size:10px;
}
body{
background-color: #f5f5f5;
font-size: 1.2em;
}
.header{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #ccc;
background-color: #eee;
}
.header h1{
text-align: center;
font-size: 2rem;
font-weight: normal;
}
.content{
max-width: 640px;
margin: 0 auto;
background-color: #fff;
}
.content .item{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align:center;
-webkit-box-align:center;
box-align:center;
-webkit-align-items:center;
align-items:center;
padding:3.125%;
border-bottom: 1px solid #ddd;
color: #333;
text-decoration: none;
}
.content .item img{
display: block;
width: 40px;
height: 40px;
border:1px solid #ddd;
}
.content .item h3{
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
max-height: 40px;
overflow: hidden;
line-height: 20px;
margin: 0 10px;
font-size: 1.2rem;
}
.content .item .date{
display: block;
height: 20px;
line-height: 20px;
color: #999;
}
.opacity{
-webkit-animation: opacity 0.3s linear;
animation: opacity 0.3s linear;
}
@-webkit-keyframes opacity {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes opacity {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
.dropload-up,.dropload-down{
position: relative;
height: 0;
overflow: hidden;
font-size: 12px;
/* 开启硬件加速 */
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
.dropload-down{
height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
height: 50px;
line-height: 50px;
text-align: center;
}
.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 0.75s linear infinite;
animation: rotate 0.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);
}
}
.weui-panel{
margin-top:5px;
}
.weui-panel:before{
border:none !important;
}
</style>
</head>
<#--<body onscroll="scroll()">-->
<body>
<div class="weui-panel weui-panel_access content">
<#--<div class="weui-panel__hd">图文组合列表</div>-->
<div class="weui-panel__bd lists" id="container">
</div>
</div>
<style>
.weui-footer {
margin: 25px 0 10px 0;
}
</style>
<#include "_foot.ftl">
<script src="js/dropload/dropload.js" type="text/javascript"></script>
<script>
$(function(){
// 页数
var page = 0; // 每页展示5个
var size = 10; // dropload调用
$('.content').dropload({
scrollArea : window,
loadDownFn : function(me){
page++; // 拼接HTML
var result = '';
$.ajax({
type: 'GET',
url: 'rest/weixin/ajaxActivity?no='+page+'&pageSize='+size,//配合后台接口
dataType: 'json',
success: function(data){
var arrLen = data.list.length;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
result+="<a href=\"rest/weixin/act_detail?id="+data.list[i].id+"\" class=\"weui-media-box weui-media-box_appmsg\">\n" +
" <div class=\"weui-media-box__hd\">\n" +
" <img class=\"weui-media-box__thumb\" src=\""+data.list[i].actfile+"\">\n" +
" </div>\n" +
" <div class=\"weui-media-box__bd\">\n" +
" <h4 class=\"weui-media-box__title\">"+data.list[i].actnum+"</h4>\n" +
" <span class=\"weui-media-box__desc\" style=\"margin-top:10px;\">"+data.list[i].acttime1+"</span >\n" +
" </div>\n" +
" </a>"
} // 如果没有数据
}else{ // 锁定
me.lock(); // 无数据
me.noData();
} // 为了测试,延迟1秒加载
setTimeout(function(){
// 插入数据到页面,放到最后面
$('.lists').append(result); // 每次数据插入,必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!'); // 即使加载出错,也得重置
me.resetload();
}
});
}
});
});</script>
</body>
</html>