快应用中模板页插入tabBar页

在pages/Demo/index.ux中置入一下代码

<import name="demob" src="../../pages/Demob/demob.ux"></import>

<import name="democ" src="../../pages/Democ/democ.ux"></import>

<import name="demod" src="../../pages/Demod/demod.ux"></import>

<import name="demodetail" src="../../pages/DemoDetail/index.ux"></import>

<template>

<!-- template里只能有一个根节点 -->

<div class="wrapper">

<block if="{{tabId==0}}">

<demodetail></demodetail>

</block>

<block if="{{tabId==1}}">

<demob></demob>

</block>

<block if="{{tabId==2}}">

<democ></democ>

</block>

<block if="{{tabId==3}}">

<demod></demod>

</block>

<tabs index="{{tabId}}" οnchange="tabBarNav">

<tab-bar mode="fixed" class="footer-container">

<block for="{{tabBar}}">

<div class="footer-item">

<block>

<image src="{{$item.active==tabId?$item.icon:$item.selectedIconPath}}" class="footer-item-img"></image>

<text style="color:{{$item.active==tabId?'red':''}}">{{$item.text}}</text>

</block>

</div>

</block>

</tab-bar>

</tabs>

</div>

</template>

<script>

import router from '@system.router'

export default {

// 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖

private: {

title: '欢迎体验快应用开发1111',

list:[1,2,3,4,5,6,7,8,9],

icon: '../../../src/assets/images/shouye.png',

tabId:0,

tabBar:[{

icon: '/assets/images/shouye.png',

selectedIconPath: "/assets/images/logo.png",

pagePath: '/pages/demo',

text: '首页',

active: 0

},{

icon: '/assets/images/gouwuche.png',

selectedIconPath: '/assets/images/logo.png',

pagePath: '/pages/demob',

text: '购物车',

active: 1

},{

icon: '/assets/images/sousuo.png',

selectedIconPath: '/assets/images/logo.png',

pagePath: '/pages/democ',

text: '搜索',

active: 2

},{

icon: '/assets/images/geren.png',

selectedIconPath: '/assets/images/logo.png',

pagePath: '/pages/demod',

text: '个人',

active: 3

}

]

},

onInit() {

// --------------------------------- Optimize SEO Start

// 当 titlebar 的文案与搜索的标题不一致时，请先设置 titlebar

// 备注：this.$page.setMeta 需要引擎 1090 版本及以上才支持，因此这段做注释处理；

this.$page.setTitleBar({ text: '首页' })

if (this.$page.setMeta) {

// this.$page.setMeta({

// title: '快应用示例模版',

// description:

// '快应用是移动互联网新型应用生态，与手机系统深度整合，为用户提供更加场景化的体验。具备传统APP完整的应用体验，但无需安装、即点即用。',

// })

}

// --------------------------------- Optimize SEO End

},

onDetailBtnClick() {

// this.title = "我是一个点击事件后的内容"

// 跳转到应用内的某个页面，router用法详见：文档 -> 接口 -> 页面路由

router.push({

uri: '/pages/detail',

})

},

// 点击切换tabBar

tabBarNav(e){

this.tabId = e.index;

},

}

</script>

tabBar为自定义