导航组件
官网传送门
跳转到tabbar页面需指定url
和open-type
属性,open-type
必须为switchTab<navigator url="/pages/message/message" open-type="switchTab">go to messagenavigator>
跳转到非tabbar页面需指定url
和open-type
属性,open-type
必须为navigate<navigator url="/pages/info/info" open-type="navigate">go to infonavigator>
delta
和open-type
属性,open-type
必须为navigateBack,delta
必须是数字,表示后退的层级<navigator open-type="navigateBack" delta="1">后退navigator>
<navigator url="/pages/info/info?name=zhangsan&age=22" open-type="navigate">go to infonavigator>
调用小程序api,实现页面跳转
wx.switchTab(Object object)
<button bind:tap="gotoContact">go to connectbutton>
ts
gotoContact() {
wx.switchTab({
url: '/pages/contact/contact'
})
},
wx.navigateTo(Object object)
<button bind:tap="gotoInfo">go to gotoInfobutton>
ts
gotoInfo() {
wx.navigateTo({
url: '/pages/info/info'
})
},
wx.navigateBack(Object object)
<button bind:tap="goBack">goBackbutton>
ts
goBack() {
wx.navigateBack({
delta: 1
})
},
<button bind:tap="gotoInfo">go to gotoInfobutton>
ts
gotoInfo() {
wx.navigateTo({
url: '/pages/info/info?name=zhangsan&age=22'
})
},
获取url传递的参数
info.ts
//获取导航参数
onLoad(options) {
console.log(options);
},
enablePullDownRefresh
官网传送门
enablePullDownRefresh
也可以在pages目录下编辑页面.json文件开启局部刷新//全局
"window": {
"enablePullDownRefresh": true,
},
//pages局部开启
"enablePullDownRefresh": true,
//全局
"window": {
"backgroundColor": "#123456",
"backgroundTextStyle":"light"
},
//pages局部开启
"backgroundColor": "#123456",
"backgroundTextStyle":"light"
onPullDownRefresh() {
console.log('onPullDownRefresh');
},
onPullDownRefresh() {
console.log('onPullDownRefresh');
wx.stopPullDownRefresh()
},
wxml
<view class="box">view>
scss
.box{
height: 2000rpx;
background-color: blue;
}
ts
onReachBottom() {
console.log('onReachBottom');
},
onReachBottomDistance
也可以在pages目录下编辑页面.json文件配置局部"onReachBottomDistance": 50
全局生命周期app.ts
App<>({
/**
* 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch() {
},
/**
* 当小程序启动,或从后台进入前台显示,会触发 onShow
*/
onShow(opts) {
console.log(opts.query)
},
/**
* 当小程序从前台进入后台,会触发 onHide
*/
onHide() {
},
/**
* 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
*/
onError(msg) {
console.error(msg)
},
})
pages页面生命周期
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
}
})