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


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获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
javascript编程起步(第六课)
Feb 27 Javascript
js常用代码段收集
Oct 28 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
JS 数字转换研究总结
Dec 26 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 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 分页函数multi() discuz
2009/06/21 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
显示、隐藏密码
2006/07/01 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
用Vue写一个分页器的示例代码
2018/04/22 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python方向键控制上下左右代码
2018/01/20 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
车间副主任岗位职责
2013/12/24 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
初中班主任评语大全
2014/04/24 职场文书
酒店管理求职信
2014/06/09 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
索尼ICF-5900W收音机测评
2022/04/24 无线电