|
| 1 | +const Vue = require('./nativescript-vue') |
| 2 | + |
| 3 | +Vue.config.debug = true |
| 4 | +Vue.config.silent = false |
| 5 | + |
| 6 | +let step1_id = 0 |
| 7 | +const Step1 = { |
| 8 | + template: ` |
| 9 | + <Page class="page"> |
| 10 | + <ActionBar title="Home" class="action-bar" /> |
| 11 | + <StackLayout> |
| 12 | + <Label text="Welcome to step 1!" /> |
| 13 | + <Button text="Thanks! Step 2 please." @tap="next" /> |
| 14 | + </StackLayout> |
| 15 | + </Page> |
| 16 | + `, |
| 17 | + created() { |
| 18 | + console.log('Step 1 created.') |
| 19 | + this.stepid = ++step1_id |
| 20 | + this.interval = setInterval(() => { |
| 21 | + console.log(`[${this.stepid}] step 1 is alive`) |
| 22 | + }, 1000) |
| 23 | + }, |
| 24 | + beforeDestroy() { |
| 25 | + console.log('Destroying step 1...') |
| 26 | + }, |
| 27 | + destroyed() { |
| 28 | + console.log('Step 1 destroyed.') |
| 29 | + clearInterval(this.interval) |
| 30 | + }, |
| 31 | + methods: { |
| 32 | + next() { |
| 33 | + this.$navigateTo(Step2) |
| 34 | + } |
| 35 | + } |
| 36 | +} |
| 37 | + |
| 38 | +const Step2 = { |
| 39 | + template: ` |
| 40 | + <Page class="page"> |
| 41 | + <ActionBar title="Home" class="action-bar" /> |
| 42 | + <StackLayout> |
| 43 | + <Label text="Welcome to step 2!" /> |
| 44 | + <Button text="Great, time for step 3." @tap="next" /> |
| 45 | + </StackLayout> |
| 46 | + </Page> |
| 47 | + `, |
| 48 | + created() { |
| 49 | + console.log('Step 2 created.') |
| 50 | + }, |
| 51 | + beforeDestroy() { |
| 52 | + console.log('Destroying step 2...') |
| 53 | + }, |
| 54 | + destroyed() { |
| 55 | + console.log('Step 2 destroyed.') |
| 56 | + }, |
| 57 | + methods: { |
| 58 | + next() { |
| 59 | + this.$navigateTo(Step3, { transition: 'slideTop' }) |
| 60 | + } |
| 61 | + } |
| 62 | +} |
| 63 | + |
| 64 | +const Step3 = { |
| 65 | + template: ` |
| 66 | + <Page class="page"> |
| 67 | + <ActionBar title="Home" class="action-bar" /> |
| 68 | + <StackLayout> |
| 69 | + <Label text="You made it to the last step!" /> |
| 70 | + <Button text="Cool, start over." @tap="reset" /> |
| 71 | + </StackLayout> |
| 72 | + </Page> |
| 73 | + `, |
| 74 | + created() { |
| 75 | + console.log('Step 3 created.') |
| 76 | + }, |
| 77 | + beforeDestroy() { |
| 78 | + console.log('Destroying step 3...') |
| 79 | + }, |
| 80 | + destroyed() { |
| 81 | + console.log('Step 3 destroyed.') |
| 82 | + }, |
| 83 | + methods: { |
| 84 | + reset() { |
| 85 | + this.$navigateTo(Step1, { clearHistory: true }) |
| 86 | + } |
| 87 | + } |
| 88 | +} |
| 89 | + |
| 90 | +new Vue({ |
| 91 | + render: h => h('frame', [h(Step1)]) |
| 92 | +}).$start() |
0 commit comments