小程序页面导航

实现导航的两种方式

声明式导航

在页面上声明一个 <navigator> 导航组件通过点击 <navigator> 组件实现页面跳转

<navigator> 组件跳转到指定的页面时，需要指定 url 属性和 open-type属性

编程式导航

调用wx.switchTab({...})方法，可以跳转到 tabBar 页面

页面事件

在全局或页面的.json 配置文件中，通过backgroundColor和backgroundTextStyle 来配置下拉刷新窗口的样式

{
  "usingComponents": {},
  "enablePullDownRefresh": true,  // 页面开启下拉刷新
  "backgroundColor":"#ff0000",  // 背景色
  "backgroundTextStyle":'light' // loading 样式
}

监听页面的下拉刷新事件

在页面的 .js文件中，通过 onPullDownRefresh()函数即可监听当前页面的下拉刷新事件

Page({

  data: {
	count:1
  },

  onPullDownRefresh: function () {
	this.setData({
		count:0
	})
  },
})

停止下拉刷新的效果

 onPullDownRefresh: function () {
	this.setData({
		count:0
	})
	// 关闭下拉刷新
	wx.stopPullDownRefresh()
  }

上拉触底

监听页面的上拉触底事件
 

  data: {
   
    loading: false

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('上拉');
    if (this.data.finished) return;
    if (this.data.loading) return;
    this.setData({
      'query.size': this.data.query.size = this.data.query.size + 3
    })
    this.initData()

  },