页面导航
声明式导航
编程式导航:调用小程序的导航API,实现页面的跳转
声明式导航:导航到tabBar页面
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
声明式导航:跳转到非tabBar页面
<navigator url="/pages/test/test" open-type="navigate">跳转到test页面</navigator>
<navigator url="/pages/test/test">跳转到test页面</navigator>
声明式导航:后退导航
<navigator open-type="navigateBack" delta="1">后退</navigator>
<navigator open-type="navigateBack">后退</navigator>
编程式导航:导航到tabBar页面
wx.switchTab()
<button bindtap="gotoMessage">跳转到message页面</button>
gotoMessage() {
wx.switchTab({
url: '/pages/message/message',
})
},
编程式导航: 导航到非tabBar页面
wx.navigateTo(Object object)
编程式导航: 后退导航
wx.navigateBack(Object object)
导航传参
声明式导航传参:
<navigator url="/pages/test/test?name=zs&age=20" open-type="navigate">跳转到test页面</navigator>
编程式导航传参:
<navigator bindtap="gotoInfo">跳转到info页面</navigator>
gotoInfo() {
wx.navigateTo({
url: '/pages/info/info?name=ls&age=55',
})
},
在onLoad
中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad
事件中直接获取到:
onLoad(options) {
this.getInfo()
this.setData({
query: options
})
},
页面事件
下拉刷新
下拉刷新
.json
文件中配置:
enablePullDownRefresh
boolean false 是否开启当前页面下拉刷新。
配置下拉刷新窗口样式:
backgroundColor
backgroundTextStyle
监听页面的下拉刷新事件
.js
中有onPullDowRefresh
函数
使用: 下拉刷新将某个数字重置
在onPullDownRefresh中设置一下。
wx.startPullDownRefresh
开始下拉刷新
wx.stopPullDownRefresh
停止当前页面下拉刷新
上拉触底
上拉触底
onReachBottom
在全局或者页面的.json
配置文件中,通过onReachBottomDistance
属性来配置上拉触底的距离。
上拉触底案例
实现步骤:
- 定义获取随机颜色的方法
- 在页面加载时获取初识数据
- 渲染UI结构并美化页面效果
- 在上拉触底时调用获取随机颜色的方法
- 添加loading提示效果
- 对上拉触底进行节流处理
实现效果以及代码
获取随机颜色的的方法
data: {
colorList: [] //随机颜色的列表
},
getColors(){
wx.request({
url: 'https://www.escook.cn/api/color',
method: 'GET',
success: ({
data: res}) => {
// console.log(res.data)
this.setData( {
colorList: [...this.data.colorList, ...res.data]
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getColors()
},
渲染UI结构并美化页面效果
<!--pages/contact/contact.wxml-->
<view wx:for="{
{colorList}}" wx:key="index" class="item" style="background-color: rgba({
{
item}});">
{
{ item }}
</view>
/* pages/contact/contact.wxss */
.item {
width: 80%;
height: 200rpx;
line-height: 200rpx;
text-align: center;
margin: 60rpx auto;
}
在上拉触底时调用获取随机颜色的方法
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom(