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

in hive-180932 •  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)
  },
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!