day-2 導航項目（跳轉三種形態）

轉發跳轉：保留當前頁面，跳轉新頁面，可返回

重定向跳轉：關閉當前頁面，跳轉，不可返回，不能指定標簽導航頁面

跳轉標簽導航：跳轉到標簽導航頁面，標簽導航跟隨選中

app.json

{"pages":["pages/home/home","pages/navigator/navigator","pages/redirect/redirect"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#2ba008","navigationBarTitleText": "導航三種跳轉","navigationBarTextStyle":"white"},"tabBar": {"selectedColor": "#FFF","backgroundColor": "#2ba008","color": "#FFF","list": [{"pagePath": "pages/home/home","text": "首頁"},{"pagePath": "pages/redirect/redirect","text": "關閉頁面跳轉"}]},"style": "v2","sitemapLocation": "sitemap.json" }

app.wxss

/**app.wxss**/.content {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif; }

home.wxml

<!--pages/home/home.wxml--><view class="btn-area"><!-- 保留頁面跳轉 --><navigator url="../navigator/navigator?title=Navigator" open-type="navigate" hover-class="navigator-hover">保留頁面跳轉</navigator><text>wx.navigateTo()</text><button type="primary" bindtap="navigateBtn" style="width:100%;">保留頁面跳轉</button><!-- 關閉頁面跳轉 --><navigator url="../navigator/navigator?title=Redirect" open-type="redirect" hover-class="other-navigator-hover">關閉頁面跳轉</navigator><text>wx.redirectTo()</text><button type="primary" bindtap="redirectBtn" style="width:100%;">關閉頁面跳轉</button><!-- 關閉頁面跳轉 --><navigator url="../redirect/redirect?title=Switch" open-type="switchTab" hover-class="other-navigator-hover">標簽導航頁面跳轉</navigator><text>wx.switchTo()</text><button type="primary" bindtap="switchBtn" style="width:100%;">標簽導航頁面跳轉</button></view>

home.wxss

/* pages/home/home.wxss */.btn-area{display: flex;flex-direction: column;align-items: center;width: 100%; }navigator{width: 100%;height: 100rpx;background: honeydew;text-align: center;line-height: 100rpx; }text{width: 100%;height: 100rpx;background: cadetblue;text-align: center;line-height: 100rpx;color: white; }button{margin-bottom: 30rpx; }.navigator-hover{color: blue; }.other-navigator-hover{color: red; }

homs.js

// pages/home/home.js Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {},navigateBtn:function(){wx.navigateTo({url: '../navigator/navigator?title=NavigatorTo',success:function(res){console.log(res);},fail:function() {},complete:function() {}});},redirectBtn:function(){wx.redirectTo({url: '../navigator/navigator?title=RedirectTo',success:function(res){console.log(res);},fail:function() {},complete:function() {}});},switchBtn:function(){wx.switchTab({url: '../redirect/redirect?title=SwitchTab',success:function(res){console.log(res);},fail:function() {},complete:function() {}});} })

redirect.wxml

<!--pages/redirect/redirect.wxml--> <text>pages/redirect/redirect.wxml</text> <text>關閉當前頁面，單機左上角的可以跳轉HOME</text>

navigator.wxml

<!--pages/navigator/navigator.wxml--> <text>pages/navigator/navigator.wxml</text> <text>保留當前頁面，單機左上角的可以返回</text> <button type="primary" bindtap="backBtn">返回上一頁</button>

navigator.js

// pages/navigator/navigator.js Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {// options 獲取提交的數據var title = options.title;console.log(title);// 設置當前頁面的導航標題wx.setNavigationBarTitle({title: title,});// 設置導航的加載動畫wx.showNavigationBarLoading();},backBtn:function(){// getCurrentPages() 獲取當前頁面棧// 1 首頁wx.navigateBack({delta: 1,});} })

項目截圖

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的a标签跳转后关闭当前页面_微信小程序2020-day-2 导航项目（跳转三种形态）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。