(3).后退导航
调用wx.navigateBack(Object)方法，可以返回上一页面或多级页面。其中Object参数对象可选的属性列表如下；
属性 类型 是否必选 说明 delta number 否 返回的页面数，如果delta大于现有页面，则返回到首页 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数(调用成功，失败都会执行)
info.js
// pages/info/info.js Page({ /** * 页面的初始数据 */ data: { }, // 1.返回上一级 goBack(){ wx.navigateBack({ delta:1 }) }, })
info.wxml
<!--pages/info/info.wxml--> <text>pages/info/info.wxml</text> <view>资料</view> <navigator open-type="navigateBack" delta="1">点我回退上一级</navigator> <navigator open-type="navigateBack">点我回退上一级</navigator> <view>----------------------------------</view> <button type="primary" bindtap="goBack">点我返回上一级</button>
4.页面导航 - 导航传参
(1).声明式导航传参
navigator 组件的 url属性用来指定要跳转到的页面路径。同时，路径的后面还可以携带参数；
- 参数于路径之间使用
?分隔。 - 参数键于参数值用
=相连。 - 不同参数用
&分隔。
当有参数传递的时候，会自动调用
/** * 生命周期函数--监听页面加载 */ onLoad(options) { },
声明式导航传参
<navigator url="/pages/info/info?name=jsxs&age=20" open-type="navigate">声明式导航到 info 页面</navigator>
(2).编程式导航传参
调用 wx.nagvigateTo(Object) 方法跳转页面时，也可以携带参数，代码实列如下:
home.wxml
<!--pages/home/home.wxml--> <text>首页</text> <!-- 1.这里的url我们必须要以 / 开头 --> <navigator url="/pages/info/info?name=jsxs&age=20" open-type="navigate">声明式导航到 info 页面</navigator> <button type="default" bindtap="toInfo">编程式导航到 info</button>
home.js
// pages/home/home.js Page({ /** * 页面的初始数据 */ data: { }, toInfo(){ wx.navigateTo({ url: '/pages/info/info?name=jsxs1&age=12', }) } })
(3).在onLoad中接受导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可直接在onLoad事件中直接获取到.
home.wxml
<navigator url="/pages/info/info?name=jsxs&age=20" open-type="navigate">声明式导航到 info 页面</navigator>
info.js : onLoad函数是微信自带的，我们通过这个函数进行获取上个页面传递过来的数据
// pages/info/info.js Page({ /** * 页面的初始数据 */ data: { name:'', age:'' }, // 1.返回上一级 goBack(){ wx.navigateBack({ delta:1 }) }, goHome(){ wx.switchTab({ url: '/pages/home/home', }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log('options->',options) this.setData({ name:options.name, age:options.age }) }, })
info.wxml
<!--pages/info/info.wxml--> <text>pages/info/info.wxml</text> <view>资料</view> <view>----------------------------------</view> <button type="default" bindtap="goHome">点击我回主页</button> <view> <text>{{name}}</text> <hr/> <text>{{age}}</text> </view>
5.页面事件-下拉刷新
(1).什么是下拉刷新
下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的操作。
(2).全局刷新和局部刷新
- 全局开启下拉刷新。
- 在app.json的window节点中，将enablePullDownRefresh设置为true。
- 局部开启下拉刷新。
- 在xxxx.json的window节点中，将enablePullDownRefresh设置为true。
xxx.json的页面下开启下拉
{ "usingComponents": {}, "enablePullDownRefresh": true }
(3).监听页面的下拉刷新事件 ⭐
监听下拉刷新的事件: 当下拉的时候会自动调用
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { },
messages.wxml
<!--pages/message/message.wxml--> <text>信息</text> <button type="default" bindtap="addCount">+1</button> <view> <text>总数: {{count}}</text> </view>
messages.js
// pages/message/message.js Page({ /** * 页面的初始数据 */ data: { count:0 }, addCount(){ console.log('this->',this) this.setData({ count:this.data.count+1 }) }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { this.setData({ count:0 }) }, })
(4).停止下拉刷新的操作
// 当数据重置成功之后，调用此函数，关闭下拉刷新的效果 wx.stopPullDownRefresh()
info.js
// pages/message/message.js Page({ /** * 页面的初始数据 */ data: { count:0 }, addCount(){ console.log('this->',this) this.setData({ count:this.data.count+1 }) }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { this.setData({ count:0 }) // 当数据重置成功之后，调用此函数，关闭下拉刷新的效果 wx.stopPullDownRefresh() }, })
