一.下拉刷新事件
1.什么是下拉刷新
下拉刷新是移动端专有名词,指的是通过手指在屏幕上下拉滑动操作,从而重新加载页面数据的行为。
2.如何启用下拉刷新
启用下拉刷新的方式有两种:
①在app.json全局配置文件中,将enablePulldownRefresh设置为true,即可为所有页面开启下拉刷新功能。
②在局部页面.json配置文件中,将enablePulldownRefresh设置为true,即可为对应页面开启下拉刷新功能。
因为并不是所有页面都需要下拉刷新,固推荐使用第二种方式来开启
3.设置下拉刷新窗口的样式
在全局或页面的.json配置文件当中,通过修改backgroundColor和backgroundTextStyle来分别设置下拉窗口的背景颜色和loading样式。
其中,backgroundColor仅支持16进制颜色值,而backgroundTextStyle仅支持dark和light两种属性
4.监听页面的下拉刷新事件
在全局或页面对应的.js文件中已经内置了onPullDownRefresh方法来监听刷新,我们只需在其中定义自身需要的方法即可。
如在每次刷新页面时在控制台输出“调用了下拉刷新方法”:
onPullDownRefresh() {
console.log('调用了下拉刷新方法'),
wx.stopPullDownRefresh()
},
5.停止下拉刷新的效果
当处理完下拉刷新的请求以后,页面的loading效果不会自动消失,需要手动来结束刷新效果,此时调用wx.stopPullDownRefresh()方法即可自动停止。
例:设置一个按钮传参让count每次加,每次加完都会在页面上显示,同时设置刷新页面后count值归零(此例结合诸多之前内容,如有看不明白可往前自行查找)
<view>{{count}}</view>
<button type="primary" bindtap="btp4" data-info="{{2}}">count+2</button>
data: {
count :0
},
btp4(e){
this.setData({
count : this.data.count + e.target.dataset.info
})
},
onPullDownRefresh() {
this.setData({
count : 0
}),
wx.stopPullDownRefresh()
},
二.上拉触底事件
1.什么是上拉触底事件
上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
2.监听页面的上拉触底事件
在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件。
3.配置上拉触底距离
上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。
可以在全局或页面的.json配置文件中,通过onReachBottomDistance属性来配置上拉触底的距离。
小程序默认的触底距离是50px,在实际开发中,可以根据自己的需求修改这个默认值。
上拉触底案例:
定义获取随机颜色的方法
在页面加载时获取初始数据
渲染UI结构并美化页面效果
在上拉触底时调用获取随机颜色的方法
添加loading提示效果
?(对上拉触底进行节流处理)
<!-- .wxml文件中 -->
<view wx:for="{{colorlist}}" wx:key="{{index}}" class="item" style="background-color: rgba({{item}});">{{item}}</view>
<!-- .wxss文件中 主要美化项目-->
.item{
border: 1px solid #efefef;
text-align: center;
border-radius: 8rpx;
line-height: 200rpx;
margin: 20rpx;
text-shadow: 0rpx 0rpx 5rpx #fff;
box-shadow: 1rpx 1rpx 6rpx #aaa;
}
<!-- .js文件中 -->
data: {
colorlist :[]
},
getcolorlist(){
wx.showLoading({
title: '数据加载中',
})
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/color',
method : "GET",
success: (res) =>{
this.setData({
colorlist : res.data.data
})
} ,
complete :() =>{
wx.hideLoading()
}
})
},
onReachBottom :function(){
this.getcolorlist()
},
<!-- 也可在.json文件中自定义一个触底距离 -->