graduate_light/app/mobile/view/article/index.html

{extend name="public/base"/}
{block name="css"}

{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">文章</span>
    </template>
</van-nav-bar>

<van-tabs v-model:active="tab_active" @click-tab="onTab">
    <van-tab title="全部" name="0"></van-tab>
    {volist name="cate_list" id="cate"}
        <van-tab title="{$cate.title}" name="{$cate.id}"></van-tab>
    {/volist}
</van-tabs>

{include file="public/list_load" list="<article-list :list='list'></article-list>" /}

{/block}
{block name="script"}
<script>
    function v_setup() {
        let form = { cate_id : {$cate_id} };
        let base = list_load('/article/listArticle',form);

        base.tab_active = Vue.ref('{$cate_id}');

        base.onTab = ({name}) => {
            base.form.cate_id = name;
            base.onRefresh();
        };

        base.onBack = () => {
            history.back();
        };

        return base;
    }
</script>
{/block}
{block name="vue"}
<script src="__COMPONENTS__/articleList.js"></script>
{/block}