微信小程序开发之视图与逻辑（八）

1.页面导航

声明式导航 

1.导航到tabBar页面

使用navigator组件跳转到指定的tabBar页面

url为指定的跳转地址，前面必须有/,open-type为跳转方式，必须是Switch-tab

/*message*.wxml*/
<navigator url="/pages/contact/contact" open-type="switchTab">导航到联系页面
</navigator>

2.导航到非tabBar页面

open-type可以省略

/*message.wxml*/
<navigator url="/pages/index/index"open-type="navigate">导航到index页面
</navigator>

3.后退导航

delta表示的是后退的层级数，默认为1

/*index.wxml*/
<navigator open-type="navigateBack" delta="1">后退
</navigator>

编程式导航

1.导航到tabBar页面

/*message.wxml*/
<button bindtap="gotocontact">跳转到联系页面
</button>

/*message.js*/
gotocontact(){
    wx.switchTab({
      url: '/pages/contact/contact',
    })
  },

2.导航到非tabBar页面

/*message.wxml*/
<button bindtap="gotoindex">跳转到索引页面
</button>

/*message.js*/
gotoindex(){
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },

3.后退导航

/*index.wxml*/
<button bindtap="goback">后退
</button>

/*index.js*/
  goback(){
    wx.navigateBack()
  },

2.导航传参

声明式导航传参

/*message.wxml*/
<navigator url="/pages/index/index?name=ls&age=19">跳转到索引页面
</navigator>

编程式导航传参

/*message.wxml*/
<button bindtap="gotoindex">跳转到索引页面
</button>

/*message.js*/
  gotoindex(){
    wx.navigateTo({
      url: '/pages/index/index?name=xl&age=19'
    })
  },

在onload里面接受导航参数

声明式的和编程式的参数都可以接收

/*index.js*/
data: {
    query:{}
  },
/*将参数传递到data*/
  onLoad(options) {
    console.log(options)
    this.setData({
      query:options
    })
  },

3.页面事件

下拉刷新

/*index.json*/
"window":{
    "backgroundTextStyle":"dark",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
  },

上拉触底

移动端专有名词，使用手指向上滑动，实现加载更多的数据

当反复上拉触底时候，不需要一直发送请求，需要进行节流处理

基本设置

/*wxml*/
<view class="box"></view>

/*wxss*/
.box{
  height: 2000rpx;
  background-color: aqua;
}

/*js*/
onReachBottom:function() {
      console.log('触发了')
    }

/*json*/
  "onReachBottomDistance": 150