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

[lemooljiang]

//第一种方法
<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)
  },

Comments

[hivebuzz]

Congratulations @lemooljiang! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :

	You published more than 1300 posts. Your next target is to reach 1400 posts.
	You distributed more than 38000 upvotes. Your next target is to reach 39000 upvotes.

_{You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP}

Check out the last post from @hivebuzz:

Hive Tour Update - Account creation and Account Recovery steps

Support the HiveBuzz project. Vote for our proposal!