小程序的跳转方式

页面链接,官方文档详细参数说明
栗子:

<!--wxml代码-->
<!--
    url:跳转的地址
    redirect:是否在本页打开,默认是false
    hover-class:点击时的样式
-->
<view>
    <navigator url="../../pages/lists/lists" redirect="true" hover-class="navigator-hover">点我去列表页</navigator>
</view>
/* wxss代码 */
.navigaror-hover{
    color:blue;
}

wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。官方文档参数详细说明

<!--wxml-->
<!--这里绑定了一个detial方法,同时获取id值-->
<view class="img">
    <image src="{{img}}"  data-id="{{id}}" bindtap="detail"></image>
</view>
//js:detail事件
//url:要跳转的地址,event.target.dataset.id为接受上面的id参数
detail:function(event){
   wx.navigateTo({
       url:"../../pages/detail/detail id="+event.target.dataset.id,
       //接口调用成功的回调方法
       fuccess:function(){},
       /接口调用失败的回调方法
       fail:function(){},
       /接口调用无论成功或者失败的回调方法
       complete:function(){}
   })
},

wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。参数与wx.navigatorTo(ONJECT)相同。

wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。官方文档详细参数说明

<!--wxml-->
<!--这里绑定一个back事件-->
<view>
    <view bindtap="back" class="back">返回</view>
</view>
//js
//wx.navigateBack()的参数是返回基层
back:function()
{
    wx.navigateBack(1);
}
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值