移动端分页 - JEECMS官方论坛|开源java cms,jsp cms,jsp bbs

***

级别: 贡士

UID: 92160
积分:726 加为好友
威望: 1 精华: 0
主题:53 回复:236
注册时间:2016-09-02
在线时长:0

1# 发表于:2017-10-20 11:01:23 IP:106.87.*.*

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>最新资讯</title>

<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">

<link rel="stylesheet" href="/${mobileRes!}/css/custom.css">
  
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/swiper.min.js" charset='utf-8'></script>

<script src="/${mobileRes!}/js/my.js"></script>
</head>
<body>
<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  class="swiper">
<div class="swiper-container0">
  <div class="swiper-wrapper">
        [@cms_content_list count='5' orderBy='4' titLen='40' channelId='94'  channelOption='1']
               [#list tag_list as a]
                     <div class="swiper-slide">
                     <a href="${a.url}"  target="_blank"  ><img src="${a.typeImg!site.defImg}"  />
                       <div class="swiper-text">[@text_cut s=a.title len=titLen /]</div></a>
                  </div>
                [/#list]
           [/@cms_content_list]
  </div>
<div class="swiper-pagination swiper-pagination-white">
  <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
    <span class="swiper-pagination-bullet"></span>
    <span class="swiper-pagination-bullet"></span>
    <span class="swiper-pagination-bullet"></span>
    <span class="swiper-pagination-bullet"></span>
  </div>
</div>
</div>
<div class="newslist">
         [@cms_content_list count='6' orderBy='4' titLen='40' channelId='101'  channelOption='1']
               [#list tag_list as a]
             <a href="${a.url}"   class="weui-media-box weui-media-box_appmsg">
                 <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="${a.typeImg!site.defImg}"  />
                </div>
              <div class="weui-media-box__bd">
             <h4 class="weui-media-box__title"> [@text_cut s=a.title len=titLen /]</h4>
              <p class="weui-media-box__desc"> [@text_cut s=a.description len=titLen /]</p>
                </div>
         </a>
                [/#list]
           [/@cms_content_list]
    </div>

<div class="weui-loadmore">
  <i class="weui-loading"></i>
  <span class="weui-loadmore__tips">正在加载</span>
</div>
<script>
$(function(){
$(document.body).pullToRefresh();
   $(document.body).on("pull-to-refresh", function() {
  //do something
   setTimeout(function() {
  for(var i=0;i<10;i++){
  $(".newslist").prepend("<p> 我是刷新出来的内容 </p>");
  }
    $(document.body).pullToRefreshDone();

  }, 1500);   //模拟延迟

});
//$(document.body).pullToRefreshDone();
$(document.body).infinite();
var loading = false;  //状态标记
$(document.body).infinite().on("infinite", function() {
  if(loading) return;
  loading = true;

  setTimeout(function() {
  for(var i=0;i<10;i++){
  $(".newslist").append(" <p> 我是加载出来的内容 </p> ");
  }
    loading = false;
  }, 1500);   //模拟延迟
});
})
</script>
</body>
</html>

我怎么将列表用到js中上拉加载，下拉刷新中去？

使用道具
顶端

yin2035

级别: 总版主

UID: 10736
积分:148366 加为好友
威望: 205 精华: 42
主题:287 回复:126119
注册时间:2010-09-08
在线时长:14.76

2# 发表于:2017-10-20 11:26:34 IP:182.218.*.*

显示全部只看该作者

抱歉，自己写的模板请自己调试，论坛不提供模板制作与调试服务

路漫漫其修远兮，吾将上下而求索!

使用道具
顶端

***

级别: 贡士

UID: 92160
积分:726 加为好友
威望: 1 精华: 0
主题:53 回复:236
注册时间:2016-09-02
在线时长:0

3# 发表于:2017-10-20 18:01:40 IP:106.87.*.*

显示全部只看该作者

模板支持移动端上拉加载，下拉刷新效果吗？

使用道具
顶端

***

级别: 贡士

UID: 92160
积分:726 加为好友
威望: 1 精华: 0
主题:53 回复:236
注册时间:2016-09-02
在线时长:0

4# 发表于:2017-10-20 18:01:56 IP:106.87.*.*

显示全部只看该作者

模板支持移动端上拉加载，下拉刷新功能吗？

使用道具
顶端

yin2035

级别: 总版主

UID: 10736
积分:148366 加为好友
威望: 205 精华: 42
主题:287 回复:126119
注册时间:2010-09-08
在线时长:14.76

5# 发表于:2017-10-23 09:04:21 IP:182.218.*.*

显示全部只看该作者

模板支持移动端上拉加载，下拉刷新效果吗？

这个是需要模板里写js实现，目前是不支持的，默认模板没有您说的上拉加载，下拉刷新

路漫漫其修远兮，吾将上下而求索!

使用道具
顶端

***

级别: 贡士

UID: 92160
积分:726 加为好友
威望: 1 精华: 0
主题:53 回复:236
注册时间:2016-09-02
在线时长:0

6# 发表于:2017-10-25 14:13:47 IP:106.85.*.*

显示全部只看该作者

我写了js，怎么传数据呢？

使用道具
顶端

yin2035

级别: 总版主

UID: 10736
积分:148366 加为好友
威望: 205 精华: 42
主题:287 回复:126119
注册时间:2010-09-08
在线时长:14.76

7# 发表于:2017-10-25 14:25:00 IP:220.64.*.*

显示全部只看该作者

传什么数据库？

路漫漫其修远兮，吾将上下而求索!

使用道具
顶端

***

级别: 贡士

UID: 92160
积分:726 加为好友
威望: 1 精华: 0
主题:53 回复:236
注册时间:2016-09-02
在线时长:0

8# 发表于:2017-10-25 14:27:21 IP:106.85.*.*

显示全部只看该作者

$(document.body).infinite();
var loading = false;  //状态标记
$(document.body).infinite().on("infinite", function() {
  if(loading) return;
  loading = true;

  setTimeout(function() {
  for(var i=0;i<10;i++){
  $(".newslist").append(" <p> 我是加载出来的内容 </p> ");
  }
    loading = false;
  }, 1500);   //模拟延迟
});
})

向js中加载下一页的内容？

使用道具
顶端

***

级别: 贡士

UID: 92160
积分:726 加为好友
威望: 1 精华: 0
主题:53 回复:236
注册时间:2016-09-02
在线时长:0

9# 发表于:2017-10-25 14:27:53 IP:106.85.*.*

显示全部只看该作者

怎么传后面的信息，调用标签

使用道具
顶端

yin2035

级别: 总版主

UID: 10736
积分:148366 加为好友
威望: 205 精华: 42
主题:287 回复:126119
注册时间:2010-09-08
在线时长:14.76

10# 发表于:2017-10-25 14:38:58 IP:220.64.*.*

显示全部只看该作者

$(document.body).infinite();
var loading = false;  //状态标记
$(document.body).infinite().on("infinite", function() {
  if(loading) return;
  loading = true;

  setTimeout(function() {
  for(var i=0;i<10;i++){
  $(".newslist").append(" <p> 我是加载出来的内容 </p> ");
  }
    loading = false;
  }, 1500);   //模拟延迟
});
})

向js中加载下一页的内容？

您这个默认系统没有的功能，需要二次开发

路漫漫其修远兮，吾将上下而求索!

使用道具
顶端