实现效果:点击主页面的按钮跳转到训练页面,同时将选择器的选择值传递到训练页面,在训练页面获取到传递的值并打印log。
index.js
import router from '@system.router' // 从system的routrt中导入router
// 在点击主页面按钮之前只要触发了选择器的onchange事件就将选中项的值保存到变量中,声明两个变量picker1value和picker2value
var picker1value = null; // 设置初始值null
var picker2value = null;
export default {
data: {
picker1range:["1","2","3"],
picker2range:["较慢","舒缓","较快"]
}, // 注意 :data 右花括号和clickAction 之间必须加上,
clickAction() { //定义一个名为clickaction的函数
router.replace({
uri: 'pages/train/train', // 当跳转到训练页面时可以将两个选择器的值存放在字典中
params:{"data1":picker1value, "data2":picker2value}
}); // 添加一条页面跳转语句
},
// 添加一个自定义函数changeAction1,响应左边选择器的onchange事件,同时定义一个名为pv的形参
changeAction1(pv) {
console.log("左边的选中项:" + pv.newValue); // 通过pv.newValue获取选中的值
picker1value = pv.newValue; //将选中心的值赋值给变量picker1value
},
//同理,添加 changeAction2,响应右边选择器的onchange事件
changeAction2(pv) {
console.log("右边的选中项:" + pv.newValue);
picker2value = pv.newValue;
},
// 实现页面的四个生命周期事件
onInit() {
console.log("主页面的onInit()被调用"); //在回调函数中打印log
console.log("接收到的左边选择器的值:" + this.data1); // 因为两个选择器的值都存放在一个字典中,对应的key分别是data1和data2,所以在训练页面中我们可以通过this.data1、this.data1获取传递过来的左右边选择器的值
console.log("接收到的右边选择器的值:" + this.data2);
},
onReady() {
console.log("主页面的onReady()被调用"); //在回调函数中打印log
},
onShow() {
console.log("主页面的onShow()被调用"); //在回调函数中打印log
},
onDestroy() {
console.log("主页面的onDestroy()被调用"); //在回调函数中打印log
}
}
在点击主页面中按钮进行页面跳转时不仅要通过uri制定目标页面还要通过params指定传递的数据,所有传递的数据都作为value存放在字典中,当跳转到训练页面时可以将两个选择器的值存放在字典中。
train.js
import router from '@system.router' // 从system的routrt中导入router
export default {
data: {
}, // 注意 :data 右花括号和clickAction 之间必须加上,
clickAction() { //定义一个名为clickaction的函数
router.replace({
uri:'pages/index/index' // 项目的config.json中对主页面的rui进行了定义,可以看到因在项目的子目录pages右键新增js page后在config.json中有新增训练页面的uri定义
}); // 添加一条页面跳转语句,此处有下划线报错提醒:这个需要需要从system的routrt中导入router,且需要在一对花括号中指定主页面uri地址
},
// 实现页面的四个生命周期事件
onInit() {
// 获取主页面传递过来的值并打印
console.log("训练页面的onInit()被调用"); //在回调函数中打印log
console.log("接收到的左边选择器的值:" + this.data1); // 因为两个选择器的值都存放在一个字典中,对应的key分别是data1和data2,所以在训练页面中我们可以通过this.data1、this.data1获取传递过来的左右边选择器的值
console.log("接收到的右边选择器的值:" + this.data2);
},
onReady() {
console.log("训练页面的onReady()被调用"); //在回调函数中打印log
},
onShow() {
console.log("训练页面的onShow()被调用"); //在回调函数中打印log
},
onDestroy() {
console.log("训练页面的onDestroy()被调用"); //在回调函数中打印log
}
}