【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

参数说明：

'amount'      :   '10',           //每次显示记录数
'address'     :   'comments.php', //请求后台的地址
'format'      :   'json',         //数据传输格式
'template'    :   '.single_item', //html记录DIV的class属性
'trigger'     :   '.get_more',    //触发加载更多记录的class属性
'scroll'      :   'false',        //是否支持滚动触发加载
'offset'      :   '100',          //滚动触发加载时的偏移量

其中还有一个more_loader_spinner这个参数；

HTML

首先要引入jquery库和jquery.more.js插件，jquery.more.js已经将许多功能都封装好了，并提供了参数配置的功能。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.more.js"></script>

模板内容：

<div id="more">
<div class="single_item">
<div class="element_head">
<div class="date"></div>
<div class="author"></div>
</div>
<div class="content"></div>
</div>
<a href="javascript:;" class="get_more">::点击加载更多内容::</a>
</div>

这个用法可以有：点击页面，先loading5秒在加载数据出来，另外一个点击加载更多

效果为：

PHP数据为：

/*
* 异步显示商品列表 by wang
*/
if ($_GET['act'] == 'asynclist') {
$sayList = array();
if (is_array($list)) {
foreach ($list as $val) {
$max_amount = $val['max_amount'] ? $val['max_amount'] : $_LANG['nolimit'];
if ($val['act_range'] != $_LANG['far_all']) {
$extends = ':<br />';
foreach ($val['act_range_ext'] as $key => $value) {
@$extends .="<a href=\"" . $val['program'] . $value['id'] . "\" taget='_blank' class='f6'><span class='f_user_info'><u>" . $value['name'] . "</u></span></a>";
}
}
$user_rank = "";
foreach ($val['user_rank'] as $rank) {
@$user_rank .= $rank."&nbsp;";
}
$act_type_ext = ( $val['act_type'] != $_LANG['fat_goods']) ? $val['act_type_ext'] : '';
$gift = '';
foreach ($val['gift'] as $key => $value) {
$price = $value['price'] > 0 ? $value['price'] . $_LANG['unit_yuan'] : $_LANG['for_free'];
@$gift .="<dl class='gift'><dt><a href='goods.php?id=".$value['id']."'><img src='".$config['site_url'].$value['thumb']."' /></a></dt><dd><a href='goods.php?id=".$value['id']."'>".$value['name']."</a></dd><dd>".$price."</dd></dl>";
}
$sayList[] = array(
'pro-inner' => '<section class="order_box padd1 radius10"><table class="ectouch_table" width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="25%" bgcolor="#ffffff" align="right">' . $_LANG['label_act_name'] . '</td>
<td width="75%" colspan="3" bgcolor="#ffffff" align="left">' . $val['act_name'] . '</td>
</tr>
<tr>
<td width="15%"  bgcolor="#ffffff" align="right">' . $_LANG['label_start_time'] . '</td>
<td width="35%" bgcolor="#ffffff" align="left">' . $val['start_time'] . '</td>
<td width="15%" bgcolor="#ffffff" align="right">' . $_LANG['label_max_amount'] . '
</td>
<td width="35%" bgcolor="#ffffff" align="left">
' . $max_amount . '
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="right">' . $_LANG['label_end_time'] . '</td>
<td bgcolor="#ffffff" align="left">' . $val['end_time'] . '</td>
<td bgcolor="#ffffff" align="right">' . $_LANG['label_min_amount'] . '</td>
<td width="200" bgcolor="#ffffff" align="left">' . $val['min_amount'] . '</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="right">' . $_LANG['label_act_range'] . '</td>
<td bgcolor="#ffffff" align="left"> '. $val['act_range'] .$extends.'
</td>
<td bgcolor="#ffffff" align="right">'.$_LANG['label_user_rank'].'</td>
<td bgcolor="#ffffff" align="left">'.$user_rank.'</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="right">' . $_LANG['label_act_type'] . '</td>
<td colspan="3" bgcolor="#ffffff" align="left">
' . $val['act_type'] . '
</td>
</tr>
<tr>
<td colspan="4" bgcolor="#ffffff" align="right">
'.$gift.'
</td>
</tr>
</table></section>'
);
}
}
echo json_encode($sayList);
exit;
}
/*
* 异步显示商品列表 by wang end
*/

HTML代码为：

<section class="wrap" id="J_ItemList">
<section class="order_box padd1 radius10 single_item">
<div class="pro-inner"></div>
</section>
<a href="javascript:;" class="get_more"></a>
</section>

JS代码为：

<script type="text/javascript">
jQuery(function($){
$('#J_ItemList').more({'address': 'activity.php?act=asynclist', 'spinner_code':'<div style="text-align:center; margin:10px;"><img src="{$ectouch_themes}/images/loader.gif" /></div>'})

});
</script>

其中例子：http://hdao123.com/mobile/activity.php

json数据为：http://hdao123.com/mobile/activity.php?act=asynclist

文章来自：https://www.geek-share.com/detail/2519101642.html

转载于:https://www.cnblogs.com/chenguiya/p/4936667.html