笨重的方法
1、首先自定义头部导航组件 相关DOM结构;
<view class="head_nav">
<view style="width:100%;height:{{statusBarHeight}}px;background-color:{{barBgColor}};" class="top_bar"></view>
<view class="status-bar" style="top:{{statusBarHeight}}px;background-color:{{barBgColor}};">
<view class="bar_text">
<view class="bar_pr">
<!-- 此为突破限制, -->
<image class="login_out_btn" bindtap="goBack" wx:if="{{isShare === '2'}}" src="../../images/fanhui.png"></image>
<image class="back_home" bindtap="getBackHome" src="../../images/home-icon.png"></image>
<view class="bar_title">{{topBarName}}</view>
</view>
</view>
</view>
</view>
2、首先自定义头部导航组件 相关js;顶部返回上一级事件
goBack() {
// 返回上一级
wx.navigateBack({
delta: 1
})
/**
* 此为突破页面层数限制,
* 每一个需要这样写
* wx.navigateTo({
* url:'',
* fail() {
* wx.redirectTo({
* url:'',
* })
* }
* })
* */
},
getBackHome(){
// 返回首页
let that = this;
wx.switchTab({
url: '/pages/index/index',
})
},
3、页面中路由跳转规则
// 每一个跳转都需要先navigateTo,wx.navigateTo跳转可以将页面添加到getCurrentPages()中,而wx.redirectTo是不会添加到历史记录中的;失败之后才使用wx.redirectTo; 不明白查看小程序路由api
这样既能保证右上角返回键,一直返回上一页;而且可以很好的辨别手机(我的安卓手机是没有问题)物理返回键逐级返回;
如:查看用户详情事件;
toSeeGoodsDetail(event) {
let that = this;
let goodsId = event.detail;
globalInfo.goodsBaseInfo = {
goodsId: goodsId
};
wx.navigateTo({
url: '/pages/goodsDetail/goodsDetail?routerName=INDEX&goodsId=' + goodsId,
fail: function(fail) {
wx.redirectTo({
url: '/pages/goodsDetail/goodsDetail?routerName=INDEX&goodsId=' + goodsId,
})
}
})
},
4、如果不确定是从什么页面进入的,可以自定义进入路由名称
如:定义 routerName=INDEX将其拼接到路径中;在下级页面根据进入路径名称判断返回哪一个页面 (此方法有问题,只能识别上一级别,而且不能识别手机物理返回键;但是可以用于小程序授权登录时,跳回指定页面)
wx.navigateTo({
url: '/pages/goodsDetail/goodsDetail?routerName=INDEX&goodsId=' + goodsId,
fail: function(fail) {
wx.redirectTo({
url: '/pages/goodsDetail/goodsDetail?routerName=INDEX&goodsId=' + goodsId,
})
}
})
如有需要请添加本人qq号:1772496409
欢迎鼓励:如果您感觉总结对您有帮助,欢迎打赏