zoukankan      html  css  js  c++  java
  • 微擎框架下拉分页(使用js模板引擎)

    1.需要分页的页面,引入一下文件

    <script language="javascript" src="addons{$_GPC['m']} emplatemobilejs/require.js"></script><!--分页相关-->
    <script language="javascript" src="addons{$_GPC['m']} emplatemobilejs/config.js"></script><!--分页相关-->
    <style type="text/css">
    .credit_list {height:40px; 94%; background:#fff; padding:10px 3%;margin-top:5px;}
    .credit_list .info {height:40px; 70%; float:left; font-size:16px; color:#666; line-height:20px; text-align:left;}
    .credit_list .info span {font-size:14px; color:#999;}
    .credit_list .num {height:40px; border-left:1px solid #eaeaea; 20%;line-height:40px; float:right; text-align:right; font-size:16px; color:#666;}
    .credit_list .num span {font-size:14px; color:#999;}
    .credit_tab {height:30px; margin:5px; border:1px solid #ff6801; border-radius:5px; overflow:hidden;font-size:13px;background:#fff;padding-right: -2px;}
    .credit_nav {height:30px; 50%; background:#fff; color:#666; text-align:center; line-height:30px; float:left;}
    .credit_navon {color:#fff; background:#ff6801;}
    .credit_no {height:100px; 100%; margin:50px 0px 60px; color:#ccc; font-size:12px; text-align:center;}
    #credit_loading { padding:10px;color:#666;text-align: center;}
    </style>

    ====================================

     发起请求

    <script language="javascript">

    require(['core','tpl'],function(core,tpl){//分页相关请求
    core.init({
    siteUrl: "{$_W['siteroot']}",
    baseUrl: "{$_SERVER['REQUEST_URI']}"
    });

    })
    </script>

    ========================================

    循环,注意最外面div的id

    <div class="weui-form-preview" id="container">
    <script id='tpl_log' type='text/html'>
    <%each list as log v%>

    <div class="weui-form-preview__hd">
    <div class="weui-form-preview__item">
    <label class="weui-form-preview__label">预约活动</label>
    <em class="weui-form-preview__value"><%log.yybt%></em>
    </div>
    </div>
    <div class="weui-form-preview__bd">

    <%each log.ziduan as zklog zv%>
    <div class="weui-form-preview__item">
    <label class="weui-form-preview__label"><%zklog.title%></label>
    <span class="weui-form-preview__value"><%log[zv].data%></span>
    </div>

    <%/each%>
    </div>
    </div><br>

    <%/each%>
    </script>

    ========================

    js代码,红色为页面模板名称

    <script id='tpl_empty' type='text/html'>
    <div class="credit_no"><i class="fa fa-file-text-o" style="font-size:100px;"></i><br><span style="line-height:18px; font-size:16px;">暂无信息</span></div>
    </script>
    <script language="javascript">
    var page = 1;
    var scrolled = false;
    var current_type = "{php echo intval($_GPC['type'])}";
    require(['tpl', 'core'], function (tpl, core) {

    function bindScroller(){
    var loaded = false;
    var stop = true;

    $(window).scroll(function () {
    if (loaded) {
    return;
    }
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
    if ($(document).height() <= totalheight) {

    if (stop == true) {
    stop = false; scrolled = true;
    $('#container').append('<div id="credit_loading" class="credit_loading_zzjz"><i class="fa fa-spinner fa-spin"></i> 正在加载...</div>');
    setTimeout(function(){
    $(".credit_loading_zzjz").remove()
    },2000);

    page++;
    core.json('wdyy', {type:current_type,page: page}, function (json) {
    stop = true;
    var morejson = json;
    $('#credit_loading').remove();
    $("#container").append(tpl('tpl_log',morejson.result));
    if (morejson.result.list.length < morejson.result.pagesize) {
    $("#container").append('<div id="credit_loading">已经加载完全部记录</div>');
    loaded = true;
    $(window).scroll = null;
    return;
    }
    }, true);
    }
    }
    });
    }
    function getLog(type) {
    $('.weui-navbar__item').removeClass('weui-bar__item_on');
    $('.weui-navbar__item[data-type=' + type + ']').addClass('weui-bar__item_on');
    core.json('wdyy', {type:type,page: page}, function (json) {
    if (json.result.list.length <= 0) {
    $('#container').html(tpl('tpl_empty'));
    return;
    }
    $('#container').html(tpl('tpl_log', json.result));
    bindScroller();
    }, true);
    }
    $('.weui-navbar__item').unbind('click').click(function () {
    page = 1; current_type = $(this).data('type')
    getLog(current_type);

    });
    getLog(current_type);
    })
    </script>

    2.php页面

    public function show_json($status = 1, $return = null)
    {//分页的函数
    $ret = array(
    'status' => $status
    );
    if ($return) {
    $ret['result'] = $return;
    }
    die(json_encode($ret));
    }

    =================================================

    页码定义

    $page=(int)($_GET['page']);
    if(empty($page)||!isset($page)){
    $page=1;
    }
    $pagesize=10;

    返回方式

    if ($_W['isajax']) {

    $this->show_json(1, array(
    'pagesize'=>$pagesize,
    'list' => $xmlist
    ));
    }

    ===============

    3.其他文件云盘下载链接: http://pan.baidu.com/s/1gf5VgqB 密码: dhus(有多余的文件么有删除掉)

    4.core cofig  那几个js文件里面有一些路径要改一下的

    《完》

  • 相关阅读:
    Leetcode Unique Binary Search Trees
    Leetcode Decode Ways
    Leetcode Range Sum Query 2D
    Leetcode Range Sum Query
    Leetcode Swap Nodes in Pairs
    Leetcode Rotate Image
    Leetcode Game of Life
    Leetcode Set Matrix Zeroes
    Leetcode Linked List Cycle II
    CF1321A
  • 原文地址:https://www.cnblogs.com/weiyiyong/p/7251508.html
Copyright © 2011-2022 走看看