全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[重庆seo推广公司哪家好]微信小程序路由跳转的三种形式详解

  微信小程序路由跳转,共有三种形式,页面中使用navigator组件做页面链接形式路由跳转△■△•,js中可以使用wx■•▽.navigateTo--保留当前页面,跳转到应用内的某个页面,wx.redirectTo--关闭当前页面,跳转到应用内的某个页面 wx☆▷●.navigateBack()--关闭当前页面,塔城市小程序制作公司回退前一页面。

  

navigator组件做页面链接

  

属性名
类型

默认值

说明

url
String
 

应用内的跳转链接

redirect

Boolean

false

是否关闭当前页面

hover-class

String

navigator-hover

指定点击时的样式类•△,当hover-class="none"时,没有点击态效果

  注•▲:navigator-hover默认为{background-color▲△★=: rgba(0, 0, 0, 0◁-▽.1)•••; opacity: 0▷…•▲.7;}, <★□•◇;navigator/>○△;的子节点背景色应为透明色

  示例代码◁•:

  

/** wxss **/
/** 修改默认的navigator点击态 **/
☆=◆.navigator-hover {
 color▽◁•○:blue=△●□;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover {
 color:red;
}
<★-;!-- sample★▽●.wxml -->
<◆☆-☆;view class="btn-area">
 <navigator url="navigate?title=navigate"○▲◇▲; hover-class="-•▽;navigator-hover"●…;>▼▷;跳转到新页面<▲□;/navigator>
 <▷●●;navigator url="redirect△△•?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开(关闭了当前页面)<◆★▽;/navigator>
<▽○▪;/view>□■=;
<!-- navigator=○.wxml -->
<view style="text-align=▲…★:center"☆●□▲;> {{title}} </view>
<……○;view> 点击左上角返回回到之前页面 </view>
<=▷…!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>□-●;
<view> 点击左上角返回回到上级页面 <•◆▼•;/view>
// redirect●•☆.js navigator▪•▪.js
Page({
 onLoad: function(options) {
 this=…○▪.setData({
 title: options.title
 })
 }
})

wx.navigateTo(OBJECT)

  保留当前页面,跳转到应用内的某个页面,使用wx★★▲★.navigateBack可以返回到原页面▽○●▪。25 2020.10 [陇南seo公司就选久澳]微信小程序验证码获取倒计时效果代码分享 本文主要和大家详细介绍微信小程序实现验证码获取倒计时效果,具有一定的参考价值,东港市小程序开发哪家好 [沧州seo公司搜久澳]小程序开发怎么申请安全证书?分享申请http证书的步骤 ,感兴趣的小伙伴

  OBJECT参数说明:

  


参数

类型

必填

说明

url

String


需要跳转的应用内页面的路径

success

Function

接口调用成功的回调函数

fail

Function


接口调用失败的回调函数

complete

Function


接口调用结束的回调函数(调用成功◇•▷、失败都会执行)

  示例代码□◁◁▪:

  

wx▽□▲.navigateTo({
 url: '▽★◁▽;test?id=1'
})

 

  注意:为了不让用户在使用小程序时造成困扰,[重庆seo推广公司哪家好]我们规定页面路径只能是五层,请尽量避免多层级的交互方式★★▪=。

  

wx.redirectTo(OBJECT)

  关闭当前页面▲□,跳转到应用内的某个页面。

  OBJECT参数说明:

  


参数

类型

必填

说明

url

String


需要跳转的应用内页面的路径

success

Function


接口调用成功的回调函数

fail

Function


接口调用失败的回调函数

complete

Function


接口调用结束的回调函数(调用成功、失败都会执行)

  示例代码:

  

wx.redirectTo({
 url: '▪■◆◇;test-▷-•?id=1'
})

wx.navigateBack()

  关闭当前页面,回退前一页面□=▪。

  以上就是微信小程序路由跳转的三种形式详解的详细内容,更多请关注久澳传媒编程栏目其它相关文章•■◁…!

[重庆seo推广公司哪家好]微信小程序路由跳转的三种形式详解

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。