目錄
1.? 跳轉到商品列表
1.1??url: 當前小程序內的跳轉鏈接
1.2??navigate：保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面
1.3??redirect： 關閉當前頁面，跳轉到應用內的某個頁面。但不能跳轉到 tabbar 頁面
1.4??navigate和redirect的區(qū)別
1.5? switchTab:跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面
1.7??reLaunch:關閉所有頁面，打開到應用內的某個頁面
1.8??navigateBack:關閉當前頁面，返回上一頁面或多級頁面，默認只能返回上一頁
1.9? 傳參
1.10? 實戰(zhàn)布局
1.? 跳轉到商品列表
????????在小程序中，如果需要進行跳轉，需要使用 navigation 組件，常用的屬性有 2個：
①? url: 當前小程序內的跳轉鏈接
②? open-type：跳轉方式
·? navigate：保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面
·? redirect： 關閉當前頁面，跳轉到應用內的某個頁面。但不能跳轉到 tabbar 頁面
·? switchTab:跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面
·? reLaunch:關閉所有頁面，打開到應用內的某個頁面
·? navigateBack:關閉當前頁面，返回上一頁面或多級頁面
注意事項：
1. 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔,參數(shù)鍵與參數(shù)值用= 相連,不同參數(shù)用&分隔例如: /list?id=10&name=hua,在onLoad(options)生命周期函數(shù)中獲取傳遞的參數(shù)。
2. open-type="switchTab"時不支持傳參。
1.1??url: 當前小程序內的跳轉鏈接
? ? ? ? 在index.wxml頁面，最下方我們先測試其相關功能，輸入如下代碼：
<navigator url="pages/list/list">到商品列表</navigator>? ? ? ? 會發(fā)現(xiàn)此時并不能點擊，進行頁面跳轉：
? ? ? ? 那是因為在進行頁面跳轉時，需要再路徑的前面添加 / 斜線，否則跳轉不成功，代碼為：
<navigator url="/pages/list/list">到商品列表</navigator>? ? ? ? ?此時在點擊就可發(fā)生跳轉：
1.2??navigate：保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面
????????對于tabbar頁面，請看：
零基礎手把手教你創(chuàng)建微信小程序（五）·小程序配置文件詳細介紹·tabbar配置以及頁面配置-CSDN博客
? ? ? ? 將1.1中的代碼注釋掉，輸入：
<navigator url="/pages/list/list" open-type="navigate">到商品列表</navigator>
<navigator url="/pages/cate/cate" open-type="navigate">到商品列表</navigator>? ? ? ? 會發(fā)現(xiàn)list非tabbar頁面會發(fā)生跳轉，而cate這個tabbar頁面不發(fā)生跳轉：
1.3??redirect： 關閉當前頁面，跳轉到應用內的某個頁面。但不能跳轉到 tabbar 頁面
? ? ? ? 將1.2代碼注釋掉，輸入：
<navigator url="/pages/list/list" open-type="redirect">到商品列表</navigator>
<navigator url="/pages/cate/cate" open-type="redirect">到商品分類</navigator>????????會發(fā)現(xiàn)list非tabbar頁面會發(fā)生跳轉，而cate這個tabbar頁面不發(fā)生跳轉：
1.4??navigate和redirect的區(qū)別
navigate：保留上一級頁面，因此還能夠返回上一級頁面。
redirect：關閉上一級頁面，只能返回首頁。
1.5? switchTab:跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面
代碼示例：
<navigator url="/pages/list/list" open-type="switchTab">到商品列表</navigator>
<navigator url="/pages/cate/cate" open-type="switchTab">到商品分類</navigator>
1.7??reLaunch:關閉所有頁面，打開到應用內的某個頁面
代碼示例：
<navigator url="/pages/list/list" open-type="reLaunch">到商品列表</navigator>
<navigator url="/pages/cate/cate" open-type="reLaunch">到商品分類</navigator>可以發(fā)現(xiàn)都能打開：
1.8??navigateBack:關閉當前頁面，返回上一頁面或多級頁面，默認只能返回上一頁
? ? ? ? 放開1.1的代碼，點擊跳轉，找到下方路徑，點擊，找到list.wxml文件：
????????在其中編寫代碼：
<!--pages/list/list.wxml-->
<!-- <text>pages/list/list.wxml</text> -->
<navigator open-type="navigateBack">返回上一頁</navigator>? ? ? ? 運行，此時點擊“返回上一頁”，會返回上一頁：
????????若是想要多級返回，需要天劍“delat”：
<!--pages/list/list.wxml-->
<!-- <text>pages/list/list.wxml</text> -->
<!-- delta:默認返回層級，默認是1，如果想返回幾級就寫幾 -->
<navigator open-type="navigateBack" delta="1">返回上一頁</navigator>1.9? 傳參
????????路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔,參數(shù)鍵與參數(shù)值用= 相連,不同參數(shù)用&分隔例如：?/list?id=10&name=hua，在onLoad(options)生命周期函數(shù)中獲取傳遞的參數(shù)。
代碼如下：
<navigator url="/pages/list/list?id=10&num=hua">到商品列表</navigator>
? ? ? ? 此時頁面跳轉時，參數(shù)已經帶過去了，我們可以在list.js文件找到生命周期函數(shù)，使用options形參用來接收傳遞的參數(shù)：
? ? ? ? 點擊跳轉頁面，可以看到此時參數(shù)已經傳遞過來了：
1.10? 實戰(zhàn)布局
? ? ? ? 找到index.wxml，將商品導航的代碼替換為如下代碼：
<!-- 商品導航 -->
<view class="good-nav">
<view>
<navigator url="/pages/list/list">
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鮮花玫瑰</text>
</navigator>
</view>
<view>
<navigator url="/pages/list/list">
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鮮花玫瑰</text>
</navigator>
</view>
<view>
<navigator url="/pages/list/list">
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鮮花玫瑰</text>
</navigator>
</view>
<view>
<navigator url="/pages/list/list">
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鮮花玫瑰</text>
</navigator>
</view>
<view>
<navigator url="/pages/list/list">
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鮮花玫瑰</text>
</navigator>
</view>
</view>
? ? ? ? 找到index.scss文件，找到商品導航區(qū)域圖片，將其替換為：
.good-nav{
display: flex;
justify-content: space-between;
background-color: #fff;
padding: 20rpx 16rpx;
border-radius: 10rpx;
view {
navigator{
display: flex;
flex-direction: column;
align-items: center;
}
image{
width: 80rpx;
height: 80rpx;
}
text{
font-size: 24rpx;
margin-top: 12rpx;
}
};
}
微信小程序開發(fā)_時光の塵的博客-CSDN博客文章來源：http://www.zghlxwxcb.cn/news/detail-848294.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-848294.html
到了這里，關于微信小程序開發(fā)系列（十一）·小程序頁面的跳轉設置以及參數(shù)傳遞的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
