四，视图与逻辑

一，页面导航

就是页面之间的互相跳转

微信小程序有两种跳转

1.1声明式导航(sxml)

<navigator>
导航到tabBar页面

<navigator url=" /" open-type="switchTab">点击跳转</navigator>

• url:要跳转的页面地址，必须以'/'开头
• open-type:跳转到方式必须以'switchTab'

---

导航到非tabBar页面

• url:要跳转的页面地址，必须以'/'开头
• open-type:跳转到方式必须以'navigate'

---

后退导航

• open-type的值必须是navigateBack
• delta 的值必须是数字 (1是上一级 以此类推)

1.2编程式导航(js)

调用api
导航到tabBar页面

• wx.switchTab（Object Object）

属性	类型	是否必选	说明
url	String	是	需要跳转的 tabBar 页面的路径，路径后面不能携带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（成功、失败都会执行）

---

导航到非tabBar页面
wx.navigateTo(Object Object)

属性	类型	是否必选	说明
url	String	是	需要跳转的非 tabBar 页面的路径，路径后面可以携带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（成功、失败都会执行）

---

后退导航
wx.navigateBack(Object Object)

属性	类型	默认值	是否必选	说明
delta	Number	1	是	返回的页数，大于现有页面数，则返回到首页
success	function	/	否	接口调用成功的回调函数
fail	function	/	否	接口调用失败的回调函数
complete	function	/	否	接口调用结束的回调函数（成功、失败都会执行）

1.3导航传参

声明式导航

• 参数与路径之间用?分割
• 参数键与参数值用=连接
• 不同参数用&分隔

<navigator url="/pages/test?name=hx&age=16">

编程式导航传参

在 onLoad 中接收导航参数

onload(option){
//option就是导航传过来的参数
  console.log(option)
this.setData({
    query:options
    })
}

二，页面事件

2.1下拉刷新时间

启用下拉刷新

• 全局开启下拉刷新
  app.json配置
  "enablePullDownRefresh":true,

• 局部开启下拉刷新
  局部就在局部的xxx.json

• 下拉刷新窗口样式

{
    "usingComponents": {},
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark"
}

• 监听页面的下拉刷新事件

onPullDownRefresh(){

//关闭下拉刷新效果
wx.stopPullDownfresh()
}

---

2.2上拉触底事件

• 监听页面的上拉触底事件

onReachBottom(){
  console.log("出发了触底事件")
}

• 配置上拉触底的距离
  "onReachBottomDistance":150
  小程序默认的触底距离是50px
• 添加loading效果

getColors() {
    // 展示 loading 效果
    wx.showLoading({
        title: '数据加载中...',
    })
    // 发起请求，获取随机颜色的数组
    wx.request({
        url: 'https://www.escook.cn/api/color',
        method: 'GET',
        success:({data: res}) => {
            console.log(res)
            this.setData({
                colorList: [this.data.colorList, ...res.data]
            })
        },
        // 隐藏 loading 效果
        complete: () => {
            wx.hideLoading()
        }
    })
},

2.3节流处理

// pages/Color/Color.js
Page({

    /**
   * 页面的初始数据
   */
    data: {
        // 随机颜色的列表
        colorList: [],
        // 节流阀
        isLoading: false
    },

    // 获取随机颜色的方法
    getColors() {
        this.setData({
            isLoading: true
        })

        // 展示 loading 效果
        wx.showLoading({
            title: '数据加载中...',
        })
        // 发起请求，获取随机颜色的数组
        wx.request({
            url: 'https://www.escook.cn/api/color',
            method: 'GET',
            success:({data: res}) => {
                console.log(res)
                this.setData({
                    colorList: [this.data.colorList, ...res.data]
                })
            },
            // 隐藏 loading 效果
            complete: () => {
                wx.hideLoading()
                this.setData({
                    isLoading: false
                })
            }
        })
    },

    /**
   * 生命周期函数--监听页面加载
   */
    onLoad(options) {
        this.getColors()
    },

    /**
   * 页面上拉触底事件的处理函数
   */
    onReachBottom() {
        if (this.data.isLoading) return
        this.getColors()
    }
})