微信小程序总结2

页面导航
声明：声明 导航组件
编程：调用小程序导航API
声明式导航
跳转指定tabBar页面 需要url属性和open-type

<!-- 跳转导航页面 -->
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
<!-- 跳转非tabBar  open-type可省略不写-->
<navigator url="/pages/info/info" open-type="navigate">导航
  到info页面</navigator>

后退

  <!-- 后退导航 后退上一个页面可省略不写-->
  <navigator  open-type="navigateBack" delta="1">后退</navigator>

编程式导航跳转
js

//通过编程式
gotoMessage(){
  wx.switchTab({
    url: '/pages/message/message',
  })
  
},

页面结构wxml

<button bindtap="gotoMessage">跳转消息页面</button>

//通过编程式 跳转非tabBar页面
gotoinfo(){
  wx.navigateTo({
    url: '/pages/info/info',
  })
  
},

编程式倒退

  <button bindtap="gotoback">后退退</button>

  gotoback(){
    wx.navigateBack({
      delta: 1,
    })
    
  },

页面传参数

<navigator url="/pages/info/info?name=zs&age=20">跳转info页面</navigator>

onLoad中接收导航参数

<navigator url="/pages/info/info?name=zs&age=20">跳转info页面</navigator>

  onLoad(options) {
    console.log(options)

  },

下拉刷新

全局刷新
局部页面刷新

json 需要页面设置
美化刷新样式
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
"enablePullDownRefresh": true

上拉触底

加载更多数据

 onReachBottom() {
    console.log('触发了上拉触底事件')

  },
配置距离
"onReachBottomDistance": 150

上拉触底的节流处理

1. data中定义isloading
2. getColors修改isloading
3. onReachBottom中判断节流的值

自定义编译模式

生命周期

应用声明周期
页面声明周期
声明周期函数
app,js

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log('onshow')
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log('onhide')
  },