導航
聲明式導航
使用<navigator></navigator>標簽
| 屬性 | 類型 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| target | string | self | 否 | 在哪個目標上發(fā)生跳轉，默認當前小程序 |
| url | string | 否 | 當前小程序內的跳轉鏈接 | |
| open-type | string | navigate | 否 | 跳轉方式 |
target參數
| 屬性值 | 說明 |
|---|---|
| self | 當前小程序 |
| miniProgram | 其它小程序 |
open-type參數
| 屬性值 | 說明 |
|---|---|
| navigate | 保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。 |
| redirect | 關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面。 |
| switchTab | 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面 |
| reLaunch | 關閉所有頁面，打開到應用內的某個頁面 |
| navigateBack | 關閉當前頁面，返回上一頁面或多級頁面?？赏ㄟ^getCurrentPages獲取當前的頁面棧，決定需要返回幾層 |
| exit | 退出小程序，target="miniProgram"時生效 |
<!-- navigate 保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。 -->
<!-- switchTab 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面 -->
<navigator url="../index/index" open-type="navigate">去非tabBar頁面</navigator>
<!-- <navigator url="../mian/mian" open-type="switchTab">去tabBar頁面</navigator> -->
編程式導航
<button type="primary" plain bind:tap="goMain">跳轉到Main</button>
js中設置
wx.navigateTo({
url: '../mian/mian?id=1001&name=zhangsan',
success: (res) => {
console.log("跳轉Main", res);
}
})
wxs
WXS（WeiXin Script）是內聯在 WXML 中的腳本段。通過 WXS 可以在模版中內聯少量處理腳本，豐富模板的數據預處理能力。
- 使用module.exports暴露方法（函數）
- module=“m1” wxs設置名稱
<view>{{m1.toUpper(msg)}}</view>
<view>{{m2.toLower(msg)}}</view>
<wxs module="m1">
module.exports.toUpper = function (str) {
return str.toUpperCase();
}
</wxs>
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
上拉觸底、下拉刷新
1.開啟下拉刷新、設置下拉觸底的高度
文章來源：http://www.zghlxwxcb.cn/news/detail-796657.html
2.在js文件中設置處理函數文章來源地址http://www.zghlxwxcb.cn/news/detail-796657.html
/**
* 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh() {
console.log("下拉刷新");
this.setData({
colorList: this.getColor()
})
wx.stopPullDownRefresh(); //停止下拉刷新的動作
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom() {
console.log("上拉觸底");
this.setData({
colorList: [...this.data.colorList, ...this.getColor()]
})
},
到了這里，關于微信小程序 - 導航 、wxs及生命周期函數的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
![[Angular 基礎] - 生命周期函數](https://imgs.yssmx.com/Uploads/2024/02/828160-1.png)
