云优CMS官方论坛_开源城市分站管理系统
搜索
 找回密码
 立即注册
查看: 102|回复: 1

关于列表页翻页样式反馈

[复制链接]

25

主题

31

帖子

31

积分

新手上路

Rank: 1

积分
31
发表于 2020-11-4 18:20:46 | 显示全部楼层 |阅读模式
网站中列表页翻页都会出现第几页,1-7页这样的,PC端还可以,但是到了移动端,这种就会被挤到下一行,这样的样式非常不好看,能不能做成可以控制显示数字几页,或者手机端就是个上一页、下一页、首页这样的样式,或者手机端是加载更多,这样也好一点。如果有这张调用方式,请回复下,谢谢
回复

使用道具 举报

7

主题

70

帖子

85

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
85
发表于 2020-11-20 11:05:04 | 显示全部楼层
加载更多代码实现参考
  1. <div class="load_more mg20">
  2.             <button class="load_more_btn" id="load_more_btn">加载更多</button>
  3.         </div>
  4.         <script type="text/javascript">
  5.             yunu.loadMore({
  6.                 url: '<yunu:config name="site_protocol"/>://<yunu:config name="site_url"/>/index.php/api/list',
  7.                 btn: $('#load_more_btn'),
  8.                 box: $('#list>ul'),
  9.                 load_icon_class: 'la-2x',
  10.                 data: {
  11.                     cid: {$cid},
  12.                     limit: 8
  13.                 },
  14.                 template: function (index, el){
  15.                     // 模板
  16.                     return  '<li data-id="{$list.id}">'+
  17.                             '    <a href="'+el.url+'" class="img">'+
  18.                             '        <img src="'+ el.pic +'">'+
  19.                             '    </a>'+
  20.                             '    <a href="'+el.url+'" class="pro_t"><p class="p1">'+el.title +'</p></a>'+
  21.                             '</li>';
  22.                 },
  23.                 beforeSend: function(XMLHttpRequest) {
  24.                     //console.log('请求发送');
  25.                 },
  26.                 done: function (res, textStatus, XMLHttpRequest){
  27.                     //console.log('请求成功');
  28.                     var template = this.template;
  29.                     var context = this.box;
  30.                     $.each(res.data, function(index, el) {
  31.                         var items = $(template(index, el));
  32.                         setTimeout(function(){
  33.                             context.append(items.addClass('fadeInDown animated'));
  34.                             items.find('img').imgAuto();
  35.                         },200*(index+1))
  36.                     });
  37.                 },
  38.                 fail: function(XMLHttpRequest, textStatus, errorThrown) {
  39.                     //console.log('请求失败');
  40.                 },
  41.                 always: function(XMLHttpRequest, textStatus, errorThrown) {
  42.                     //console.log('请求完成');
  43.                 }
  44.             });
  45.         </script>
复制代码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|小黑屋|云优CMS官方论坛

GMT+8, 2020-11-30 03:14 , Processed in 0.037122 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表