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


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实现闪动的title消息提醒效果
Jun 20 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python标准库itertools的使用方法
2020/01/17 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
关于环保的活动方案
2014/08/25 职场文书
上班迟到检讨书
2014/09/15 职场文书
个人总结与自我评价
2015/02/14 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫