导航
声明式导航
使用<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.开启下拉刷新、设置下拉触底的高度
2.在js文件中设置处理函数
/*** 页面相关事件处理函数--监听用户下拉动作*/
onPullDownRefresh() {console.log("下拉刷新");this.setData({colorList: this.getColor()})wx.stopPullDownRefresh(); //停止下拉刷新的动作},/*** 页面上拉触底事件的处理函数*/onReachBottom() {console.log("上拉触底");this.setData({colorList: [...this.data.colorList, ...this.getColor()]})},
