• 客服QQ:1193846053   微信:suyoufuwu   联系电话:13080553467     

arclist配合arcpagelist标签实现ajax瀑布流分页

速优网络(10年经验),服务数万家企业,固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司,专业团队,值得选择!建站业务:企业网站建设、公司官网制作、外贸网站建设、网站仿制、网站复制、仿站、外贸建站、单页扒站 客服微信【suyoufuwu】


[arcpagelist基础用法]

名称:arcpagelist

范围:首页,列表页,内容页等


第一步,在你想要放ajax瀑布流分页的模板加入如下代码

{eyou:arclist row='10' typeid='栏目ID' tagid='标签名称'}
    <p><a href="{$field.arcurl}" title="{$field.title}">{$field.title}</a></p>
{/eyou:arclist}

栏目ID填你对应的后台栏目前面的数字,tagid='标签名称'中的标签名称改一个名称比如:abc,看是否输出了数据。


第二步,在上面代码基础上的外围加上<div id="abc">,没错,就是和上面的tagid='标签名称'的标签名称是一致的。这很重要。代码如下:

<div id="abc">
   {eyou:arclist row='10' typeid='栏目ID' tagid='abc' }
       <p><a href="{$field.arcurl}" title="{$field.title}">{$field.title}</a></p>
   {/eyou:arclist}
</div>


第三步:在<div id="abc">外围加上AJAX分页代码,如下:

{eyou:arcpagelist pagesize='3' tagid='与上面的tagid名称一致' tips='没有数据了'}
<a href="javascript:void(0);" {$field.onclick}>点击加载更多</a>
{/eyou:arcpagelist}

变成

<div id="abc">
   {eyou:arclist row='10' typeid='栏目ID' tagid='abc' }
       <p><a href="{$field.arcurl}" title="{$field.title}">{$field.title}</a></p>
   {/eyou:arclist}
</div>
 
{eyou:arcpagelist pagesize='3' tagid='abc' tips='没有数据了'}
    <a href="javascript:void(0);" {$field.onclick}>点击加载更多</a>
{/eyou:arcpagelist}


第四步

        在当前模板文件夹里建一个叫做system的文件夹,system里面建一个arclist_tagid名称.htm的文件,如我们上面的例子可以命名为arclist_abc.htm,请注意红色的这个abc,这和上面的tagid是一致的。将上面{eyou:arclist}与{/eyou:arclist}之间的代码也就是 <p><a href="{$field.arcurl}" title="{$field.title}">{$field.title}</a></p>粘到arclist_abc.htm,保存,这样就可以实现ajax瀑布流分页效果了,pagesize='3'你可以改成你点击一次加载的条数。上面的arclist里的row='10'是指默认初如条数。

总结

        arcpagelist标签实现ajax瀑布流分页关健要点:

        第一,tagid标签的位置,1、外围,2、arclist里面,3、arcpagelist里,4、system里的htm文件名,总共四个地方要一致。如果运行有问题,可以从这四个地方排查。

        第二,system里面的htm文件的内容一定要和{eyou:arclist}与{/eyou:arclist}之间的代码一致。

        掌握了方法后,你就可以加入图片等数据了。


以上就是速优网络和大家分享的"arclist配合arcpagelist标签实现ajax瀑布流分页",非常感谢您有耐心的读完这篇文章,我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供:企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务,本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作,请扫码咨询,我们将诚挚为您服务。

TAG标签:

全国分站

全国分站