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


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 相关文章推荐
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
axios的拦截请求与响应方法
Aug 11 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 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和ACCESS写聊天室(五)
2006/10/09 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
php递归json类实例
2014/12/02 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
js判断是否是手机页面
2017/03/17 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python 编写简单网页服务器的实例
2018/06/01 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
详解python statistics模块及函数用法
2019/10/27 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
C语言面试题
2015/10/30 面试题
2014年效能监察工作总结
2014/11/21 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
Python 中面向接口编程
2022/05/20 Python