微信小程序学习第5天——页面导航（声明式与编程式导航）与页面事件（上拉与下拉刷新）

一、页面导航

1、导航方式

小程序的2种页面导航方式：①声明式导航 ② 编程式导航

区别	声明式导航	编程式导航
跳转方式	点击 <navigator>组件实现页面跳转	调用小程序的导航API实现页面跳转
导航到tabBar页面	指定url和open-type属性值为switchTab（opten-type属性可以省略）	调用wx.switchTab()方法
导航到非tabBar页面	指定url属性和open-type属性值为navigate	调用 wx.navigateTo() 方法
后退导航	指定open-type属性值为navigateBack，delta属性的值必须为数字	调用 wx.navigateBack() 方法

编程式导航wx.switchTab(object)和wx.navigateTo(object)方法中Object参数对象的属性列表

属性	类型	是否必选	说明
url	string	是	跳转路径，可带参数
success	function	否	调用成功的回调
fail	function	否	调用失败的回调
complete	function	否	不论成功是否哦都会执行

注意点：声明式导航在后退到上一页时，可以省略delta属性，因为其默认值是1

2、导航传参

不论声明式导航还是编程式导航都可以传参
① 参数与路径之间使用 ? 分隔 ② 参数键与参数值用 = 相连 ③ 不同参数用 & 分隔

<navigator url="/pages/detail/detail?id=1&name=zs"></navigator>

3、接收参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到

onLoad：function(options) {
	console.log(options)
}

4、案例

// .wxml
<view class="container">
<!-- 跳转到tabBar -->
<button bindtap="btnHome">编程式导航跳转到首页</button>
<navigator url="/pages/home/home" open-type="switchTab">声明式导航跳转到首页</navigator>
<!-- 跳转到非tabBar -->
<button bindtap="btnDetail">编程式导航跳转到详情页</button>
<navigator url="/pages/detail/detail">声明式导航跳转到详情页</navigator>
<!-- 带参数 -->
<navigator url="/pages/detail/detail?name=zs">带参数跳转</navigator>
</view>

// .js
Page({
  data: {
    querys:{}
  },
  btnHome(){
    wx.switchTab({
      url: '/pages/home/home'
    })
  },
  btnDetail(){
    wx.navigateTo({
      url: '/pages/detail/detail',
    })
  },

// .js（接收参数的组件）
  onLoad(options) {
    console.log(options)
  },
})

二、页面事件

全局开启刷新：在 app.json 的 window 节点中；局部开启刷新：在页面的 .json 配置文件中
在实际开发中，一般推荐使用局部下拉刷新

1、下拉刷新

《1》开启下拉刷新：enablePullDownRefresh属性

enablePullDownRefresh: true;

《2》停止下拉刷新：调用 wx.stopPullDownRefresh()方法

《3》监听下拉刷新事件：onPullDownRefresh() 函数

《4》配置下拉刷新的样式
窗口的背景颜色：设置backgroundColor属性

backgroundColor : #000;

下拉刷新 loading 的样式：设置backgroundTextStyle属性

 backgroundTextStyle：dark / light;

2、上拉触底

《1》监听上拉触底事件： onReachBottom() 函数

《2》页面上拉触底距离
在页面的.json配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离，默认的触底距离是 50px

3、显示Loading提示框

《1》开启：调用wx.showLoading()方法

 wx.showLoading({
    title: '数据加载中',  // 提示的内容
  })

《2》关闭：调用 wx.hideLoading()方法

三、案例练习

需求：上拉触底（根据接口生成随机背景颜色，添加loading提示效果，对上拉触底进行节流处理）

.WXML代码

<view class="container">
  <view wx:for="{{arrList}}" wx:key="id" style="background-color:rgba({{item}});">
  <text>{{item}}</text>
</view>
</view>

.WXSS代码

.container {
  text-align: center;
  padding: 0;
}
.container view {
  width: 100%;
  margin-bottom: 20rpx;
  height: 200rpx;
  line-height: 200rpx;
}

.JS代码

Page({
  data: {
    arrList:[],
    isloading:false, // 定义节流阀
  },

  // 封装一个获取随机颜色的函数
  getColor(){
  	// 开启节流阀
    this.setData({
      isloading:true
    })
    wx.showLoading({
      title: '数据加载中',
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:(res)=>{
        this.setData({
          arrList:[...this.data.arrList,...res.data.data]
        })
      },
      complete:()=>{
        wx.hideLoading();
        // 关闭节流阀
        this.setData({
          isloading:false
        })
      }
    })
  },

  onLoad(options) {
    this.getColor()
  },
   // 页面上拉触底事件的处理函数
  onReachBottom() {
  		// 判断节流阀状态
      if(this.data.isloading) return;
      this.getColor();
  }
})