Can I use subnavbar in <template>

Questions
1

I would like to use subnavbar in template and code is below, but it didnt work at all.

could anyone pls tell me how can I do, Thx.

<template>
<div class="navbar cars-search">
    <div class="toolbar tabbar">
        <div class="toolbar-inner">
            <a href="javascript:" class="tab-link tab-link-active" id="tab-1">品牌</a>
            <a href="javascript:" class="tab-link" id="tab-2">车型</a>
            <a href="javascript:" class="tab-link" id="tab-3">价格</a>
        </div>
    </div>
    <div class="navbar-inner">
        <div class="subnavbar">
            <div class="subnavbar-inner">
                <div class="segmented segmented-raised">
                    <a class="button tab-link tab-link-active" href="#tab1">推荐</a>
                    <a class="button tab-link" href="#tab2">商家</a>
                    <a class="button tab-link" href="#tab3">个人</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-content hide-navbar-on-scroll">
    <div class="tabs">
        <div class="tab tab-active" id="tab1">
<!--            <div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="loadRecomMore">-->
                <div class="list media-list">
                    <ul>
                        <li>
                            <a href="javascript:" class="item-content">
                                <div class="item-media"><img src="assets/images/demo/car13.jpg" width="80" height="80"/></div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title">个人名称</div>
                                    </div>
                                    <div class="item-subtitle">Beatles</div>
                                    <div class="item-text">地址地址地址地址地址地址地址地址地址地址地址</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:" class="item-content">
                                <div class="item-media"><img src="assets/images/demo/car13.jpg" width="80" height="80"/></div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title">个人名称</div>
                                    </div>
                                    <div class="item-subtitle">Beatles</div>
                                    <div class="item-text">地址地址地址地址地址地址地址地址地址地址地址</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
<!--                <div class="content-recom-usedcars-list">-->
<!--                    {{#each recomInfo}}-->
<!--                    <a href="javascript:" class="item-content">-->
<!--                        <div class="item-media"><img src="{{usedCarPhoto}}" width="80" height="80"/></div>-->
<!--                        <div class="item-inner">-->
<!--                            <div class="item-title-row">-->
<!--                                <div class="item-title">{{usedCarName}}</div>-->
<!--                            </div>-->
<!--                            <div class="item-subtitle">年份: {{usedCarYear}}, 里程: {{sellCarsMeters}}</div>-->
<!--                            <div class="item-text">售价: AU${{usedCarPrice}}<span class="notification-my-cars">{{sellUserType}}</span></div>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                    {{/each}}-->
<!--                </div>-->
<!--                {{#if recomData.recordsTotal>4}}-->
<!--                <div class="preloader infinite-scroll-preloader recom-more-preloader"></div>-->
<!--                {{/if}}-->
<!--            </div>-->
        </div>
        <div class="tab" id="tab2">
<!--            <div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="loadStoreMore">-->
                <div class="list media-list">
                    <ul>
                        <li>
                            <a href="javascript:" class="item-content">
                                <div class="item-media"><img src="assets/images/demo/car13.jpg" width="80" height="80"/></div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title">个人名称</div>
                                    </div>
                                    <div class="item-subtitle">Beatles</div>
                                    <div class="item-text">地址地址地址地址地址地址地址地址地址地址地址</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:" class="item-content">
                                <div class="item-media"><img src="assets/images/demo/car13.jpg" width="80" height="80"/></div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title">个人名称</div>
                                    </div>
                                    <div class="item-subtitle">Beatles</div>
                                    <div class="item-text">地址地址地址地址地址地址地址地址地址地址地址</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
<!--                <div class="content-store-usedcars-list">-->
<!--                    {{#each storeInfo}}-->
<!--                    <a href="javascript:" class="item-content">-->
<!--                        <div class="item-media"><img src="{{usedCarPhoto}}" width="80" height="80"/></div>-->
<!--                        <div class="item-inner">-->
<!--                            <div class="item-title-row">-->
<!--                                <div class="item-title">{{usedCarName}}</div>-->
<!--                            </div>-->
<!--                            <div class="item-subtitle">年份: {{usedCarYear}}, 里程: {{sellCarsMeters}}</div>-->
<!--                            <div class="item-text">售价: AU${{usedCarPrice}}<span class="notification-my-cars">{{sellUserType}}</span></div>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                    {{/each}}-->
<!--                </div>-->
<!--                {{#if storeData.recordsTotal>4}}-->
<!--                <div class="preloader infinite-scroll-preloader store-more-preloader"></div>-->
<!--                {{/if}}-->
<!--            </div>-->
        </div>
        <div class="tab" id="tab3">
<!--            <div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="loadIndividualMore">-->
<!--                <div class="content-individual-usedcars-list">-->
<!--                    {{#each individualInfo}}-->
<!--                    <a href="javascript:" class="item-content">-->
<!--                        <div class="item-media"><img src="{{usedCarPhoto}}" width="80" height="80"/></div>-->
<!--                        <div class="item-inner">-->
<!--                            <div class="item-title-row">-->
<!--                                <div class="item-title">{{usedCarName}}</div>-->
<!--                            </div>-->
<!--                            <div class="item-subtitle">年份: {{usedCarYear}}, 里程: {{sellCarsMeters}}</div>-->
<!--                            <div class="item-text">售价: AU${{usedCarPrice}}<span class="notification-my-cars">{{sellUserType}}</span></div>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                    {{/each}}-->
<!--                </div>-->
<!--                {{#if individualData.recordsTotal>4}}-->
<!--                <div class="preloader infinite-scroll-preloader individual-more-preloader"></div>-->
<!--                {{/if}}-->
<!--            </div>-->
        </div>
    </div>
    <input type="hidden" class="hidRecomDisplayLength" value="{{recomData.displayLength }}"/>
    <input type="hidden" class="hidRecomDisplayStart" value="{{recomData.displayStart }}"/>
    <input type="hidden" class="hidRecomDisplayPageNum" value="{{recomData.displayPageNum }}"/>
    <input type="hidden" class="hidStoreDisplayLength" value="{{storeData.displayLength }}"/>
    <input type="hidden" class="hidStoreDisplayStart" value="{{storeData.displayStart }}"/>
    <input type="hidden" class="hidStoreDisplayPageNum" value="{{storeData.displayPageNum }}"/>
    <input type="hidden" class="hidIndividualDisplayLength" value="{{individualData.displayLength }}"/>
    <input type="hidden" class="hidIndividualDisplayStart" value="{{individualData.displayStart }}"/>
    <input type="hidden" class="hidIndividualDisplayPageNum" value="{{individualData.displayPageNum }}"/>
</div>
</template>
<script>
    return {
        methods: {
            loadRecomMore: function(){
                alert('loadRecomMore');
            },
            loadStoreMore: function(){
                alert('loadStoreMore');
            },
            loadIndividualMore: function(){
                alert('loadIndividualMore');
            },
        },
        on :{
            pageInit: function(event, page){
                
            }
        },
    }
</script>
2

Component must return single element which should be the page. You try to return two elements and both are wrong - not page

3

Thanks for your reply.

4

hello,i solved this problem,but how can i add infinite in subnavbar page,expect your reply,thanks :smile: