微信小程序实现跳转的几种方式总结(推荐)


Posted in Javascript onApril 24, 2019

今天把实现微信页面的跳转的几种方法总结分享下

1.使用导航组件,标签,页面链接来实现(可以发现点击时有背景)

<!-- sample.wxml -->
<view class="btn-area">
 <navigator url="../my/my">跳转到新页面</navigator>
</view>

参数如下

微信小程序实现跳转的几种方式总结(推荐)

2.给页面布局加监听bindtap事件,然后在方法里面,通过wx.navigatorTo来实现跳转(保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面)

在my.wxml中加监听bindtap事件

<view bindtap='jump'>跳转</view>

在my.js中实现跳转

jump:function(){
  wx.navigateTo({
   url: '../login/login',
   success: function(res) {

   },
   fail: function(res) {

   },
   complete: function(res) {

   },
  })
 }

参数如下

微信小程序实现跳转的几种方式总结(推荐)

3.通过wx.redirectTo实现跳转(关闭当前页面,跳转到应用内某个页面)

navigateto_index: function (event) { 
 wx.redirectTo({ 
 url: '../index/index', 
 success: function (res) { 
 // success 
 }, 
 fail: function () { 
 // fail 
 }, 
 complete: function () { 
 // complete 
 } 
 }) 

 }

参数如下

微信小程序实现跳转的几种方式总结(推荐)

4.通过wx.navigateBack返回上一级(关闭当前页面。返回上一页面或多级页面)。

wx.navigateBack({ 
 delta: 1, // 回退前 delta(默认为1) 页面 
 success: function (res) { 
 // success 
 }, 
 fail: function () { 
 // fail 
 }, 
 complete: function () { 
 // complete 
 } 
 })

微信小程序实现跳转的几种方式总结(推荐)

以上所述是小编给大家介绍的微信小程序跳转方式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
js实现轮播图特效
May 28 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 #Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 #Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 #Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 #Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 #Javascript
js实现全选反选不选功能代码详解
Apr 24 #Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 #Javascript
You might like
随机头像PHP版
2006/10/09 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP运行模式的深入理解
2013/06/03 PHP
PHP引用返回用法示例
2016/05/28 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
js切换光标示例代码
2013/10/10 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
十佳青年个人事迹材料
2014/01/28 职场文书
《乞巧》教学反思
2014/02/27 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
材料物理专业求职信
2014/09/01 职场文书
毕业证代领委托书
2014/09/26 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
带你学习MySQL执行计划
2021/05/31 MySQL
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python