page2.vue
<template>
<view>
这是page2
<button type="primary" @click="open">点击跳转</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
console.log('page onload2')
},
//页面渲染完成
onReady(){
console.log('page2 onReady')
//获取节点信息
},
//页面显示
onShow(){
console.log('page2 onShow')
},
//页面隐藏
onHide(){
console.log('page2 onHide')
},
//页面卸载
onUnload(){
console.log('page2 onunload')
//请求后台接口
//渲染前得操作
},
methods: {
open(){
//打开新页面
uni.navigateTo({
url:'../pages/index/index?id=uniapp'
})
}
}
}
</script>
<style>
</style>
index.vue
<template>
<!-- <view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view> -->
<view>
<view class="box" hover-class="hoverclass">
测试文字1
</view>
<view class="box" hover-class="hoverclass">
测试文字2
</view>
<text>测试文字3</text>
<text>测试文字4</text>
<view class="image-box">
<image src="../../static/logo.png" mode="aspectFit"></image>
</view>
<view>
{{title}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: ''
}
},
//页面加载
onLoad(e) {
console.log('page onload',e)
this.title=e.id
},
//页面渲染完成
onReady(){
console.log('page onReady')
},
//页面显示
onShow(){
console.log('page onShow')
},
//页面隐藏
onHide(){
console.log('page onHide')
},
//页面卸载
onUnload(){
console.log('page onunload')
},
methods: {
}
}
</script>
<style>
.box{
border:1px solid red;
}
.hoverclass{
background:#007AFF ;
}
.image-box{
width: 100px;
height: 100px;
}
</style>
运行结果