导航跳转的方法 / 小程序设计与开发 #9

in STEEM CN/中文3 years ago
//第一种方法
<navigator url="../detail/detail">跳转页面</navigator>
//注意:不能跳转到tabBar索引的页面
//路径的另一种写法:url="/pages/detail/detail"   
// ./ 表示当前目录  ../ 表示上一级目录  / 表示根目录

//第二种方法
使用点击事件,bindtap会出现冒泡,用catchtap可阻止冒泡事件
<view bindtap="clickA">点击</view>
//js
Page({
    clickA: function() {
    wx.navigateTo({//跳转到普通页面,父页面隐藏              
      url: '../detail/detail'
    })
  },

    wx.redirectTo({
      url: '../detail/detail'  ////跳转到普通页面,父页面关闭  
    })

  clickA: function () {
    wx.switchTab({ //跳转到tab页面
      url: '../reader/reader'
    })
  },
})

如果要传递参数,比如id
<navigator url="../courses-detail/courses-detail?id=1">
    <view class='course-title'>photoshop研习社</view>
</navigator>
在对应的页面(courses-detail)js中接受在onLoad 的options中:
onLoad: function (options) {
    this.setData({
      id:options['id']
    })
  },

也可以使用点击函数传递参数(id)
<view bindtap='changePost' data-id='2'>这一篇</view>
//js
  changePost: function (event) {
    var id = event.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    });
    console.log(666, event.currentTarget.dataset.id)
  },

Coin Marketplace

STEEM 0.17
TRX 0.16
JST 0.029
BTC 60323.94
ETH 2395.54
USDT 1.00
SBD 2.54