目录
页面导航
小程序中实现页面导航的两种方式
声明式导航
导航到tabBar页面![](https://img-blog.csdnimg.cn/939af87a744f41ebbc9470d9a2c633da.png)
导航到非tabBar页面
后退导航
编程式导航
导航到tabBar页面
案例
<button bindtap="gotoHome">跳转到首页</button>
//通过编程式导航跳转到tabBar页面
gotoHome() {
wx.switchTab({
url: '/pages/home/home',
})
},
导航到非tabBar页面
代码和上面类似
后退导航
<button bindtap="gotoBack">后退</button>
//编程式导航后退到上一页(默认值为1)
gotoBack() {
wx.navigateBack({
delta:1
})
}
导航传参
声明式导航传参
编程式导航传参
在onLoad中接收导航参数
导航传参所携带的参数可以直接在onLoad事件中直接获取到
//只能在此页面中获取到
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
},
//所有的页面都可获取
/**
* 页面的初始数据
*/
data: {
query:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
this.setData({
query:options
})
},
页面事件
下拉刷新
启用下拉刷新
配置下拉刷新窗口的样式
监听页面的下拉刷新事件
点击按钮count自增1
<view>count的值是:{{count}}</view>
<button bindtap="addCount">加1</button>
/**
* 页面的初始数据
*/
data: {
count: 1
},
addCount() {
this.setData({
count: this.data.count + 1
})
},
下拉count置为0
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//下拉刷新count值置为0
this.setData({
count:0
})
},
停止下拉刷新效果
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//下拉刷新count值置为0
this.setData({
count: 0
})
//当数据重置成功之后,调用此函数,关闭下拉刷新效果(开启后不会自动关闭)
wx.stopPullDownRefresh()
},
上拉触底
监听页面上拉触底事件
配置上拉触底距离
注:直接写数字 (单位默认为px)