声明式导航
navigator标签可以实现页面跳转。
<!-- 语法格式 -->
<navigator url="页面路径" open-type="跳转方式"></navigator>
| open-type 属性 | 说明 |
|---|---|
| navigate | 普通页面跳转（默认） |
| switchTab | tabBar页面跳转 |
| navigateBack | 后退页面 配合 delta 属性使用，表示回退几个页面，默认是 1注意：非 tabBar 页面才有回退。 |
通过 Js 方式跳转页面
-
跳转到普通页面
wx.navigateTo({ url: '页面路径', success: { } }) -
跳转到 tabBar 页面
wx.navigateTo({ url: '页面路径' }) -
回退页面
delta表示回退几个页面。wx.navigateBack({ delta: 1, })
导航传参
-
参数传递
-
在标签上跳转传递
<navigator url="/pages/message/message?参数名=值"> -
在js中跳转传参
wx.navigateTo({ url: 'pages/message/message?参数1=值&参数2=值' })
-
-
参数接收
在跳转后的页面的
onLoad生命周期内，使用options参数接收。Page({ data() { query: { } }, onLoad(options) { this.setData({ this.query = options }) } })
页面导航标题
wx.setNavigationBarTitle可以动态设置当前页面的导航标题。
-
父页面
<block wx:for="{ {gridList}}" wx:key="id"> <!-- 1.传递页面标题 --> <navigator class="grid-item" url="/pages/shoplist/shoplist?id={ {item.id}}&title={ {item.name}}"> <image src="{ {item.icon}}"></image> <text>{ {item.name}}</text> </navigator> </block> -
子页面
Page({ data: { query: { } }, // 生命周期函数--监听页面加载 onLoad(options) { // 2.接收父页面传递过来的参数 this.setData({ query: options }) }, // 生命周期函数--监听页面初次渲染完成 onReady () { // 3.动态设置当前页面的标题 wx.setNavigationBarTitle({ title: this.data.query.title }) } })
下拉刷新
*.json文件中的enablePullDownRefresh用于开启页面下拉刷新。
| 方法名 | 说明 |
|---|---|
| onPullDownRefresh() {} | 监听下拉刷新 |
| wx.stopPullDownRefresh() | 停止下拉刷新 |
-
一般会关闭全局的下拉刷新，在需要使用的页面打开局部下拉刷新。
/* app.json */ { "window": { "enablePullDownRefresh": false } } -
在页面的
json文件中打开下拉刷新/* pages/home/home.json */ { "enablePullDownRefresh": true } -
在页面的
.js文件中的onPullDownRefresh函数中做下拉刷新的业务处理。{ // 页面相关事件处理函数--监听用户下拉动作 onPullDownRefresh () { // 业务逻辑 ... // 停止下拉刷新 wx.stopPullDownRefresh() }, }-
模拟商品列表下拉刷新
Page({ // 页面相关事件处理函数--监听用户下拉动作 onPullDownRefresh() { // 清空已经加载的数据 this.setData({ shopList: [], page: 1 }) // 重新获取第一页数据 this.getShopData() }, })
-
上拉触底加载
在页面的
.js中配置上拉加载事件的业务逻辑。
Page({
// 页面上拉触底事件的处理函数
onReachBottom() {
...
}
})
-
模拟商品列表上拉触底，加载更多数据。
/* pages/shoplist/shoplist.js */ Page({ data: { shopList: [], // 商品列表 page: 1, // 页数 pageSize: 10 // 每页多少条数据 }, // 获取商品列表 async getShopData() { const { data:res } = await wx.p.request({ url: `https://applet-base-api-t.itheima.net/categories/1/shops`, method: "GET", data: { // 页数和每页显示多少条数据 _page: this.data.page, _pageSize: this.data.pageSize }, }) this.setData({ // 新数据添加到原数据后面 shopList: [...this.data.shopList, ...res] }) }, // 页面相关事件处理函数--监听用户下拉动作 onPullDownRefresh () { this.setData({ shopList: [] }) this.getShopData() // 停止下拉刷新 wx.stopPullDownRefresh() }, // 页面上拉触底事件的处理函数 onReachBottom() { // 上拉触底，页数+1 this.setData({ page: this.data.page + 1 }) // 加载更多数据 this.getShopData() }, })
加载节流
原理是在
data中定义isloading参数，默认为 false，在请求接口开始前，设置
isloading为 true，接口请求完毕后 设置为 false。
Page({
data: {
// 商品列表
shopList: [],
// 节流阀
isLoading: false,
},
// 获取商品列表方法
getShopList() {
// 1.展示loading效果
wx.showLoading({
title: '数据加载中···'
})
// 2.开启节流阀
this.setData({
isLoading: true
})
// 3.发起网络请求，请求商品列表数据
wx.request({
url: 'https://www.escook.cn/api/color',
method: 'GET',
success: ({
data:res }) => {
this.setData({
shopList: [...this.data.shopList, ...res]
})
},
// 物流成功失败都调用complete方法
complete: () => {
// 4.隐藏loading效果
wx.hideLoading()
// 5.关闭节流阀
this.setData({
isLoading: false
})
}
})
},
// 页面上拉触底事件的处理函数
onReachBottom() {
// 6.如果节流阀开启，则不继续请求接口
if (this.data.isLoading) return
this.getShopList()
}
})