呆错文章管理系统移动端滑动菜单调用实例

呆错文章管理系统移动端滑动菜单调用实例通常用在移动端模板需要显示较多的菜单列表中使用，演示可以查看初始手机端的内容筛选页。

第一步：加载JS插件
通过模板继承的方式在模板头部加载DaiCuo前端JS包，代码如下。

{block name="header_more"}<script src="{:DcUrlJs($domain,$path_root.'public/js/front.js',true)}"></script>{/block}

第二步：调用数据
这里以筛选页的栏目分类为例进行演示，循环数据也可以通过助手函数自行调用。

<div class="w-100 mb-3 d-flex flex-row">
  <div class="filter-left"><strong>栏目分类</strong></div>
  <div class="filter-right" data-toggle="carousel">
    <a class="carousel-cell mx-1 badge badge-pill {:DcDefault($term_id, 0, 'badge-dark', 'badge-light')}" href="{:cmsUrlFilter(array_merge($pageFilter,['term_id'=>0]))}">全部</a>
    {volist name="termIds" id="filterTermName" offset="0" length="30"}
    <a class="carousel-cell mx-1 badge badge-pill {:DcDefault($key, $term_id, 'badge-dark', 'badge-light')}" href="{:cmsUrlFilter(array_merge($pageFilter,['term_id'=>$key]))}">{$filterTermName}</a>{/volist}
  </div>
</div>

第三步：监听事件
在模板页底部位置继承JS模板组件，Javascript调用方法如下，参数可自行搜索“flickity”参考。
{block name="js"}

{/block}