做笑话网站赚钱,nodejs php wordpress,个人做网站时不要做什么样的网站,网站建设 51下拉先看下效果图 大致实现的功能点#xff1a;
从Indext页面跳转到Second页面#xff0c;传递两个参数#xff0c;一个字符串#xff0c;一个数量#xff1b;Second获取Index页面传递的数据#xff1b;Second页面点击返回弹窗#xff1b;Second页面返回携带参数数据#…先看下效果图 大致实现的功能点
从Indext页面跳转到Second页面传递两个参数一个字符串一个数量Second获取Index页面传递的数据Second页面点击返回弹窗Second页面返回携带参数数据Index获取Second页面回传数据。
下面我们一个一个讲解
1、从Indext页面跳转到Second页面并传递参数 import router from ohos.router;Entry
Component
struct Index {State message: string Index PageState fromSecondMessage: string build() {Column() {Column() {Text(${this.message}).width(300vp).height(60vp).textAlign(TextAlign.Center).fontSize(50fp).fontWeight(FontWeight.Normal)Button(Next).borderRadius(5vp).width(80%).height(50vp).margin({ top: 10vp }).onClick(this.clickNext.bind(this))Text(this.fromSecondMessage).fontSize(20vp).textAlign(TextAlign.Center).margin({top:10vp})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}.width(100%).height(100%)}clickNext() {router.pushUrl({url: pages/Second,params: {name: 我是来自页面Index的数据,count: 100}}, router.RouterMode.Single)}
}
使用router 进行页面跳转这里使用pushUrl进行页面跳转除了pushUrl外还可以使用replaceUrl进行页面替换其中参数是RouterOptions对象主要是url跟params,url是页面路径params是传递数据类型为object。
最后面参数是RouterMode.Single
RouterMode9
路由跳转模式。
系统能力 SystemCapability.ArkUI.ArkUI.Full。 名称 说明 Standard 标准模式。 目标页面会被添加到页面路由栈顶无论栈中是否存在相同url的页面。 Single 单实例模式。 如果目标页面的url在页面栈中已经存在同url页面离栈顶最近的页面会被移动到栈顶移动后的页面为新建页。 如目标页面的url在页面栈中不存在同url页面按标准模式跳转。
2、Second获取Index页面传递的数据
import router from ohos.router;Entry
Component
struct Second {State message: string Second PageState paramsFromIndex: object router.getParams()build() {Row() {Column() {Text(this.message).margin({ top: 10vp }).fontSize(50).fontWeight(FontWeight.Normal)Text(this.paramsFromIndex?.[name] ,count: this.paramsFromIndex?.[count]).margin({ top: 10vp }).fontSize(20).fontWeight(FontWeight.Normal).margin({top:10vp})Button(Back).width(80%).height(50vp).margin({top:10vp})}.width(100%)}.height(100%)}}
使用router.getParams()获取Index页面传递的数据。
3、Second页面点击返回弹窗
router.enableBackPageAlert({message: 确认关闭当前页面吗})router.back()调用enableBackPageAlert触发返回询问弹窗点击取消不会触发back方法点击确定触发返回。
4、Second页面返回携带参数数据
router.back({url:pages/Index,params: {src: 这是来自Second Page的数据}})
5、Index获取Second页面回传数据
回到Index页面后怎么获取Second页面的回传数据呢也是使用 router.getParams() 进行数据获取那在什么时候函数里进行获取呢可以跟Second页面中一样使用
State params: object router.getParams()
这样定义获取吗其实是不行的重新回到Index页面后上述代码并不会执行这个时候我们应该在页面生命周期函数里进行获取。 onPageShow() {this.fromSecondMessage router.getParams()?.[src]}
本文到此结束。
