小程序day——5

一：页面导航

        浏览器的页面导航方式：

                1：<a>链接

                2：locathref.href

        小程序的导航方式：

                a：声明式导航

                        1：在页面是声明一个<navigator>导航组件

                        2：通过点击<navigator>组件实现页面跳转

                b：编程式导航

                        1：调用小程序的导航API，实现页面跳转

1：声明式导航

1：导航到tabBar页面

        tabBar页面是指被配置为tabBar的页面

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

        a:        url表示要跳转页面的地址，以 / 开头

        b:        open-type表示跳转方式，必须为switchTab

        列：

        <navigator url="/pages/contact/contact" open-type="switchTab">导航到tabBar页面 </navigator>

2：导航到非tabBar页面

        需要把<navigator>组件的open-type表示跳转方式，必须为navigate

 列：

        <navigator url="地址" open-type="navigate">导航到tabBar页面 </navigator>

跳转更多

3：后退导航

要后退一级页面和多级页面，则需要指定open-type属性和delta属性

        a：open-type值必须是navigateBack表示后退导航。

        b：delta必须是数字，表示要后退的层级,delta默认值为 1。

        <navigator  open-type="navigateBack"  delta=" 1 ">后退的页面 </navigator>

2：编程式导航

1：跳转到tabBar界面

        调用 wx.switchTab(Object object) 方法，Object 为参数对象属性为：

                        url                string        要跳转的tabBar路径

                        success       fun             接口调用成功的回调函数         

                        fall                fun             接口调用失败的回调函数 

                        complete       fun             接口调用结束的回调函数（不管是否成功） 

列：

wx.switchTab({

                  url: '/pages/message/message',

        })

2：跳转到非tabBar界面

      wx.navigateTo( Object object )

3：后退导航

        wx.navigateBack( Object object ) 方法，object属性

        重点：

                delta：  默认值为：1  返回的页数

3：导航传参

navigator组件的url属性用来指定将跳转到的页面的路径，同时 路径后面可以携带一些参数

：参数与路径之间用 ？分隔

：参数键与参数值用 = 相链

：不同参数用&分隔

列

        url: '/pages/dome/dome ? name=tsy & age=23 ',

获取导航携带的参数，在onLoad事件生命周期函数中获取：

         /**

             * 生命周期函数--监听页面加载

         */

    onLoad(options) {

        console.log(options);

    },

  /** options:携带参数 **/

注意：tabBar页面传参不能在url后面加参数，tabBar页面传参可以采用设置全局变量的方法来传递参数

二：页面事件

1：下拉刷新

        下拉屏幕重新加载页面数据

       一： 启用下拉刷新enablePullDownRefresh

        1：全局下拉刷新开启

                在app.json的window节点中，将  enablePullDownRefresh设置为true

        2：局部下拉刷新开启

                在各个页面的 .json配置文件中，将  enablePullDownRefresh设置为true

        二：下拉窗口样式配置

                在.json文件的window节点中配置

                               "backgroundColor": "#cccccc"        设置下拉背景颜色,仅支持16进制

                                "backgroundTextStyle": "dark"        设计下拉loading样式，仅支持dark/ligh

        三：监听页面下拉刷新事件onPullDownRefresh

                

                onPullDownRefresh(){

                        console.log('监听下拉事件');

                    }

        通常下拉后loading不会主动消失，所以要手动隐藏loading示例。

        通过调用 wx.stopPullDownRefresh() 停止当前页面下拉效果，隐藏loading。

                列

                        onPullDownRefresh() {

                                wx.stopPullDownRefresh()

                            },

2.上拉触底

在屏幕上拉滑动，加载更多数据

一，监听上拉触底事件

在个文件夹的.js文件中通过onReachBottom（）函数监听当前页面的上拉触底

        onReachBottom() {

                console.log('触发了上拉事件');

            },

二，配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离

在.json配置文件window节点中通过onReachBottomDistance属性来配置上拉触底的距离，默认值为50px

列：将上拉触底的距离设置为80

        "window":{

                "onReachBottomDistance": 80

        }

三，显示加载效果

显示loading：wx.showLoading({obj Obj})

配合wx.hideLoading()使用

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)

注意：为了放止过多请求，可以写个节流阀