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


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 表单规则集合对象
Jul 21 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
ES5和ES6中类的区别总结
Dec 21 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时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
Python3基础之输入和输出实例分析
2014/08/18 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python 5个实用的技巧
2020/09/27 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
电子商务应届生自我鉴定
2014/01/13 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
公司经理任命书
2014/06/05 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
歌舞青春观后感
2015/06/10 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Java字符串逆序方法详情
2022/03/21 Java/Android