知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    微信小程序路由跳转指定页面

    作者:佳明妈 来源:web前端开发 2016-10-13 人气:
    微信小程序路由跳转,共有三种形式,页面中使用navigator组件做路由跳转,js中可以使用wx.navigateTo--保留当前页面,跳转到应用内的某个页面,wx.redirectTo--关闭当前页面,跳转到应用内的
    微信小程序路由跳转,共有三种形式,页面中使用navigator组件做页面链接形式路由跳转,js中可以使用wx.navigateTo--保留当前页面,跳转到应用内的某个页面,wx.redirectTo--关闭当前页面,跳转到应用内的某个页面 wx.navigateBack()--关闭当前页面,回退前一页面

    页面链接。

    属性名 类型 默认值 说明
    url String   应用内的跳转链接
    redirect Boolean false 是否关闭当前页面
    hover-class String navigator-hover 指定点击时的样式类,当hover-class="none"时,没有点击态效果

    注:navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator/>的子节点背景色应为透明色

    示例代码:

    /** wxss **/
    /** 修改默认的navigator点击态 **/
    .navigator-hover {
        color:blue;
    }
    /** 自定义其他点击态样式类 **/
    .other-navigator-hover {
        color:red;
    }
    <!-- sample.wxml -->
    <view class="btn-area">
      <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
      <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开(关闭了当前页面)</navigator>
    </view>
    <!-- navigator.wxml -->
    <view style="text-align:center"> {{title}} </view>
    <view> 点击左上角返回回到之前页面 </view>
    <!-- redirect.wxml -->
    <view style="text-align:center"> {{title}} </view>
    <view> 点击左上角返回回到上级页面 </view>
    // redirect.js navigator.js
    Page({
      onLoad: function(options) {
        this.setData({
          title: options.title
        })
      }
    })

    wx.navigateTo(OBJECT)

    保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

    OBJECT参数说明:

    参数 类型 必填 说明
    url String 需要跳转的应用内页面的路径
    success Function 接口调用成功的回调函数
    fail Function 接口调用失败的回调函数
    complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

    示例代码:

    wx.navigateTo({
      url: 'test?id=1'
    })

    注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。

    wx.redirectTo(OBJECT)

    关闭当前页面,跳转到应用内的某个页面。

    OBJECT参数说明:

    参数 类型 必填 说明
    url String 需要跳转的应用内页面的路径
    success Function 接口调用成功的回调函数
    fail Function 接口调用失败的回调函数
    complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

    示例代码:

    wx.redirectTo({
      url: 'test?id=1'
    })

    wx.navigateBack()

    关闭当前页面,回退前一页面。

    ↓ 查看全文

    微信小程序路由跳转指定页面由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    微信小程序路由跳转指定页面-最新评论