mirror of
https://github.com/easychen/pushdeer.git
synced 2025-04-30 16:29:51 +08:00
88 lines
2.4 KiB
XML
88 lines
2.4 KiB
XML
<import name="my-tabbar" src="./tabbar"></import>
|
|
<import name="device" src="../Device"></import>
|
|
<import name="key" src="./device"></import>
|
|
<import name="message" src="./device"></import>
|
|
<import name="settings" src="./device"></import>
|
|
<template>
|
|
<div class="wrapper">
|
|
<stack class="stack">
|
|
<image class="deer-background" src="/assets/images/home-background.svg" />
|
|
<component is="{{ tabbarData[currentPageIndex].compName }}"></component>
|
|
</stack>
|
|
<my-tabbar tabbar="{{tabbarData}}" onemit-evt="emitEvt"></my-tabbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
private: {
|
|
currentPageIndex: 0,
|
|
tabbarData: [
|
|
{
|
|
iconPath: '/assets/images/tabbar-device.svg',
|
|
selectedIconPath: '/assets/images/tabbar-device-active.svg',
|
|
active: true,
|
|
compName: 'device',
|
|
title: '设备'
|
|
},
|
|
{
|
|
iconPath: '/assets/images/tabbar-key.svg',
|
|
selectedIconPath: '/assets/images/tabbar-key-active.svg',
|
|
active: false,
|
|
compName: 'key',
|
|
title: 'Key'
|
|
},
|
|
{
|
|
iconPath: '/assets/images/tabbar-message.svg',
|
|
selectedIconPath: '/assets/images/tabbar-message-active.svg',
|
|
active: false,
|
|
compName: 'message',
|
|
title: '消息'
|
|
},
|
|
{
|
|
iconPath: '/assets/images/tabbar-settings.svg',
|
|
selectedIconPath: '/assets/images/tabbar-settings-active.svg',
|
|
active: false,
|
|
compName: 'settings',
|
|
title: '设置'
|
|
}
|
|
]
|
|
},
|
|
onRefresh() {
|
|
console.log('home page refreshed!!!')
|
|
},
|
|
onShow() {
|
|
console.log('home page shown!!!')
|
|
this.$page.setTitleBar({ text: this.tabbarData[this.currentPageIndex].title })
|
|
},
|
|
emitEvt({ detail: { idx: newIdx } } = evt) {
|
|
// console.log('home', 'emitEvt', 'newIdx', newIdx)
|
|
// console.log('home', 'emitEvt', 'tabbarData', this.tabbarData)
|
|
this.tabbarData[this.currentPageIndex].active = false;
|
|
this.tabbarData[newIdx].active = true;
|
|
this.currentPageIndex = newIdx
|
|
this.$page.setTitleBar({ text: this.tabbarData[newIdx].title })
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="less">
|
|
@import './../../assets/styles/style.less';
|
|
|
|
.wrapper {
|
|
.flex-box-mixins(column, center, center);
|
|
|
|
.stack {
|
|
/* width: 100%; */
|
|
flex-grow: 1;
|
|
align-items: flex-end;
|
|
|
|
.deer-background {
|
|
/* position: fixed; */
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
/* bottom: 200px; */
|
|
}
|
|
}
|
|
}
|
|
</style>
|