抖音小程序页面链接/导航

一、navigator

​
<navigator url="" open-type="" hover-class=""></navigator>

/*

open-type属性   

navigate 保留当前页面，跳转到应用内的某个页面，但是不能跳转到 tabBar 页面。 对应 tt.navigateTo
 
redirect 关闭当前页面，跳转到应用内的某个页面，不能跳转到 tabBar 页面。  对应 tt.redirectTo

switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，目标 tabBar 页面需要在 app.json 中定义。  对应 tt.switchTab

navigateBack 关闭当前页面，返回上一页面或多级页面。 对应 tt.navigateBack

reLaunch  关闭所有页面，打开应用内的某个页面。 对应 tt.reLaunch
*/

​

hover-class 默认值为 navigator-hover

{
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0.7;
}

示例：

  

二、页面导航

   （1）tt.navigateTo

            保留当前页面，跳转到应用内的某个页面，但是不能跳转到 tabBar 页面，使用 tt.navigateBack 可以返回到原页面。

    ttml

<button type="primary" bindtap="onItemClick">navigateTo跳转页面</button>

    ttss

.title {
    background-color: white;
    padding: 20rpx 30rpx;
}  
.intro{
    color: gray;
    padding: 20rpx 30rpx;
}

javascript

​
Page({
  data: {
    length: 0
  },
  async onLoad(){    // 加载数据调用
    const pages = await this.getPages();
    this.setData({
      length: pages.length
    })
  },
  getPages() {   // 获取数据
    return new Promise((resolve, reject) => {
      resolve(getCurrentPages());
    })
  },
  onItemClick() {  // 通过数据对应跳转  一般通过每条数据的id 进行跳转
    tt.navigateTo({
      url: `tt-navigate-page?params=navigateTo`, //demo示例，一般路径形式：/pages/detail/detail?key=${value}
      success(res) {
        console.log(res);
      },
      fail(res) {
        console.log("navigateTo调用失败");
      },
    });
  },
})

​

示例：

 （2）tt.redirectTo

            redirectTo 跳转页面后将关闭当前页面，跳转到应用内的某个页面，不能跳转到 tabBar 页面。

Page({
  data: {
    length: 0
  },
  async onLoad(option) {
    const pages = await this.getPages();
    this.setData({
      length: pages.length
    })
  },
  getPages() {
    return new Promise((resolve, reject) => {
      resolve(getCurrentPages());
    })
  },
  onItemClick() {
    tt.redirectTo({
      url: 'tt-redirect-page?params=redirectTo',
      success(res) {
        console.log('success执行了', res);
      },
      fail(err) {
        console.log('fail执行了', err);
      },
      complete(res) {
        console.log('complete执行了', res);
      }
    });
  }
})

 （3）tt.switchTab

               跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，目标 tabBar 页面需要在 app.json 中定义。

Page({
  toIndexTab() {
    tt.showModal({
      title: "跳转到 tabBar 页面",
      content: "跳转到 tabBar 页面会关闭此页面，无法返回，是否确定跳转？",
      success(res) {
        console.log("用户点击了" + (res.confirm ? "确定" : "取消"));
        if(res.confirm){
          tt.switchTab({
            url: '/pages/API/index',
            success(res) {
              console.log('success执行了', res);
            },
            fail(err) {
              console.log('fail执行了', err);
            },
            complete(res) {
              console.log('complete执行了', res);
            }
          });
        }
      },
      fail(err) {
        console.log(`showModal 调用失败`, err);
      },
    });
  }
})

（4）tt.navigateBack

               关闭当前页面，返回上一页面或多级页面。

    ttml

<view class="container">
  <view class="title">当前页面的路由层级：{{length}}</view>
  <view class="intro">navigateBack 可以返回上一页面或多级页面，但第一个页面不能使用 navigateBack。</view>
  <view class="btn-area">
    <button type="primary" bindtap="onItemClick">navigateTo跳转至navigateBack页面</button>
    <button type="primary" bindtap="navigateBack">navigateBack返回上一页</button>
  </view>
</view>

   javascript

Page({
  data: {
    length: 0
  },
  async onLoad(options) {
    const pages = await this.getPages();
    this.setData({
      length: pages.length
    })
  },
  getPages() {
    return new Promise((resolve, reject) => {
      resolve(getCurrentPages());
    })
  },
  navigateBack() {
    tt.navigateBack({
      delta: 1,
      success(res) {
        console.log('success执行了', res);
      },
      fail(err) {
        console.log('fail执行了', err);
        tt.showModal({
          title:"返回上一页失败",
          content: "第一个页面不能 navigate back",
          showCancel:false
        });
      },
      complete(res) {
        console.log('complete执行了', res);
      }
    });
  },
  onItemClick() {
    tt.navigateTo({
      url: `tt-navigate-page?params=navigateBack`, //demo示例，一般路径形式：/pages/detail/detail?key=${value}
      success(res) {
        console.log(res);
      },
      fail(res) {
        console.log("navigateTo调用失败",res);
      },
    });
  },
})

    示例：

           

（4）tt.reLaunch

            关闭所有页面，打开应用内的某个页面。

  ttml

<view class="container">
  <view class="title">当前页面的路由层级：{{length}}</view>
  <view class="intro">reLaunch 跳转页面后将关闭所有页面，打开应用内的某个页面。</view>
  <view class="btn-area">
    <button type="primary" bindtap="toRoute">reLaunch跳转页面</button>
  </view>
</view>

javascript

Page({
  data: {
    length: 0
  },
  async onLoad() {
    const pages = await this.getPages();
    this.setData({
      length: pages.length
    })
  },
  getPages() {
    return new Promise((resolve, reject) => {
      resolve(getCurrentPages());
    })
  },
  toRoute() {
    tt.reLaunch({
      url: 'tt-launch-page?param=reLaunch',
      success(res) {
        console.log('success执行了', res);
      },
      fail(err) {
        console.log('fail执行了', err);
      },
      complete(res) {
        console.log('complete执行了', res);
      }
    });
  }
})

 具体参数方法清参考 抖音开发平台 -- 》开发 --》JS API --》页面导航