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


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 相关文章推荐
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
js面向对象编程总结
Feb 16 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
js中的闭包实例展示
Nov 01 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
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连mysql和oracle数据库性能比较
2006/10/09 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
js实现抽奖功能
2020/11/24 Javascript
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
python中列表和元组的区别
2017/12/18 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Django之路由层的实现
2019/09/09 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
职称评定自我鉴定
2014/03/18 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
检讨书格式
2015/01/23 职场文书
Python os和os.path模块详情
2022/04/02 Python