导航
声明式导航
使用<navigator></navigator>
标签
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
target | string | self | 否 | 在哪个目标上发生跳转,默认当前小程序 |
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.开启下拉刷新、设置下拉触底的高度
文章来源:https://www.toymoban.com/news/detail-796657.html
2.在js文件中设置处理函数文章来源地址https://www.toymoban.com/news/detail-796657.html
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log("下拉刷新");
this.setData({
colorList: this.getColor()
})
wx.stopPullDownRefresh(); //停止下拉刷新的动作
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("上拉触底");
this.setData({
colorList: [...this.data.colorList, ...this.getColor()]
})
},
到了这里,关于微信小程序 - 导航 、wxs及生命周期函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!