一、页面导航
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();
}
})
转载：https://blog.csdn.net/Vest_er/article/details/128876370
查看评论