zoukankan      html  css  js  c++  java
  • mpvue——页面跳转

     两个页面

    两个页面的跳转,只是单纯的A->B这种跳转。

    组件

    直接使用小程序的组件,navigator,里面还有一些其他的参数,大家可以自行翻阅官方文档

    <navigator url="./join/main" >参与场次</navigator>

    API

    保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

    官方文档地址

    html

    <div class="detail-btn">
        <div>
          <img src="/static/images/game_count@3x.png" alt="参与场次">
          <span @click="openResult">参与场次</span>
        </div>
        <div>
          <img src="/static/images/game_log@3x.png" alt="奖品记录">
          <span @click="viewPrizeRecord">奖品记录</span>
        </div>
    </div>

    methods

    mpvue页面跳转是兼容小程序的,所以小程序的跳转也是可以直接使用的,为了演示下面两个跳转都用了。

    methods: {
          openResult () {
              wx.navigateTo({url: './join/main'})
            },
          viewPrizeRecord () {
              mpvue.navigateTo({url: './prize/main'})
            }
        }

    下面的这个写法也可以,但是定义的常量名必须为url,还是比较推荐上面的写法

     methods: {
          openResult () {
             const url = './join/main'
             mpvue.navigateTo({url})
            },
          viewPrizeRecord () {
              mpvue.navigateTo({url: './prize/main'})
            }
        },

    内页跳首页

    我从A页面跳到B页面,然后从B页面跳首页,使用API wx.reLaunch()

    html

    <img @click="goHome" class="empty-btn" src="/static/images/btn1.png" alt="">

    methods

     goHome () {
                     mpvue.reLaunch({url:'/pages/index/main'})
                },
  • 相关阅读:
    linq中的AsEnumerable()方法
    c# 一个匿名对象中包含多个子对象的处理方式
    jenkins的安装与启动
    牛客网-2018年湘潭大学程序设计竞赛-F
    poj-1149(最大流)
    hdu-2255(带权二分图)
    bzoj-1191(二分图最大匹配)
    codevs2822
    hdu 5652(并查集)
    hdu—3861(tarjan+二分图)
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/10417976.html
Copyright © 2011-2022 走看看