微信小程序_8,视图与逻辑

目标:

• 能够知道如何实现页面之间的导航跳转
• 能够知道如何实现下拉刷新效果
• 能够知道如何实现上拉加载更多效果
• 能够知道小程序中常用的生命周期函数

逻辑与视图

什么是页面导航:

页面导航指的是页面之间的互相跳转,例如:浏览器中实现页面导航的方式有如下两种

1.链接
2.location.href

小程序中实现页面导航的两种方式:

1.声明式导航:

• 在页面上声明一个<navigatoe>导航组件
• 通过点击<navigator>组件实现页面跳转

2.编程式导航:

• 调用小程序的导航API,实现页面跳转

导航到tabBar页面:

tabBar页面指的是被配置为tabBar的页面
在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:

• url表示要跳转的页面地址,必须以/开头
• open-type表示跳转的方式,必须以switchTab
  实例代码如下:

  <navigator url="/pages/message/message" open-type="switchTab">导航到message循环页</navigator>
1

• 注意,这里tabBar配置的页面是需要在app.json中的tabBar节点下配置了的页面才会进行跳转!

导航到非tabBar页面:

通过非声明式导航

非tabBar页面指的是没有被配置为tabBar的页面
在使用<navigator>组件跳转到非tabBar页面时,则需要指定url属性和open-type属性,其中:

• url表示要跳转的页面地址,必须以/开头
• open-type表示跳转的方式,必须为navigator

实例代码如下:

<navigator url="/pages/for/for" open-type="navigate">导航到for循环页</navigator>
1

这里的url属性只需要在app.json的pages节点中配置了即可

注意:这里为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以省略

后退导航:

如果要后退到上一页面或是多级页面,则需要指定open-type和delta属性,其中:

• open-type的值必须是navigateBack,表示要进行后退导航
• delta的值必须是数字,表示要进行后退的导航
  示例代码如下:

  <navigator open-type="navigateBack" delta="-1">
    返回上一级
  </navigator>
1
2
3