文章目录
- 一、下拉刷新
- 下拉刷新的概念以及场景
- 如何启动下拉刷新
- 设置下拉刷新窗口的样式
- 监听下拉刷新事件
- 停止下拉刷新
- 二、上拉加载
- 上拉加载的概念以及场景
- 设置上拉加载的距离
- 案例
- 三、页面滑动事件`onPageScroll`
- 四、分享事件 `onShareAppMessage`
- 五、点击 tabBar时触发事件 `onTabItemTap`
一、下拉刷新
下拉刷新的概念以及场景
- 概念:下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上自上而下的滑动,可以触发页面的下拉刷新,更新列表数据。
- 应用场景:在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新、定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案。
如何启动下拉刷新
- 在
app.json
的window
选项中或页面配置中开启enablePullDownRefresh
。
{
"usingComponents": {},
"enablePullDownRefresh": true
}
- 可以通过
wx.startPullDownRefresh()
触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
<button bindtap="refresh" type="primary">刷新</button>
refresh:function() {
wx.startPullDownRefresh()
}
注意: 一般情况下,推荐在页面配置中为需要的页面单独开启下拉刷新行为
设置下拉刷新窗口的样式
- 在
app.json
的window
选项中或页面配置中修改backgroundColor
和backgroundTextStyle
选项。 -
backgroundColor
用来配置下拉刷新窗口的背景颜色,仅支持16进制颜色值 -
backgroundTextStyle
用来配置下拉刷新loading
的样式,仅支持dark
和light
监听下拉刷新事件
需要先开启下拉刷新
- 为页面添加
onPullDownRefresh()
函数,可以监听用户在当前页面的下拉刷新事件。
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('触发下拉刷新啦')
}
停止下拉刷新
- 处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,
- 因此需要手动隐藏下拉刷新的 loading 效果,调用
wx.stopPullDownRefresh()
可以停止当前页面的下拉刷新。
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('触发下拉刷新啦')
setTimeout(function(){
wx.stopPullDownRefresh()
},2000)
}
二、上拉加载
上拉加载的概念以及场景
- 概念:在移动端,随着手指不断向上滑动,当内容将要到达屏幕底部的时候,页面会随之不断的加载后续内容,直到没有新内容为止,我们称之为上拉加载更多。上拉加载更多的本质就是
数据的分页加载
。 - 应用场景:在移动端,列表数据的分页加载,首选的实现方式就是上拉加载更多。
设置上拉加载的距离
- 在
app.json
的window
选项中或页面配置中设置触底距离onReachBottomDistance
。单位为px
,默认触底距离为50px
。 - 为页面添加
onReachBottom()
函数,可以监听用户在当前页面的上拉触底事件,从而实现上拉加载更多列表数据的效果。
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('触发上拉刷新啦')
}
案例
<!--wxml *this 表示用item来做唯一的标识-->
<view wx:for="{{dataList}}" wx:key="*this" class="list">
{{item}}
</view>
// js
data: {
dataList:[1,2,3,4,5,6,7,8,9,10],
pageSize:1
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log("触底了")
this.setData({
pageSize:this.data.pageSize+1
})
let newArr = []
for(let i = 0;i<10;i++){
newArr.push((this.data.pageSize-1)*10 +i+1)
}
this.setData({
dataList: [...this.data.dataList,...newArr]
})
}
三、页面滑动事件onPageScroll
- 监听用户滑动页面事件
- 得到
scrollTop
,页面在垂直方向已滚动的距离(单位px
)
// 页面滑动事件
onPageScroll: function (e) {
console.log(e.scrollTop)
}
四、分享事件 onShareAppMessage
- 监听用户点击页面内转发按钮(
<button> 组件 open-type="share"
) - 右上角菜单“转发”按钮的行为,并自定义转发内容。
参数 | 类型 | 说明 |
|
| 转发事件来源。button:页面内转发按钮;menu:右上角转发菜单 |
|
| 如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined |
|
| 页面中包含 |
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (e) {
console.log(e)
}
- 自定义转发内容,
return
一个Object
就可以
字段 | 说明 | 默认值 |
| 转发标题 | 当前小程序名称 |
| 转发路径 | 当前页面 path ,必须是以 |
| 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持 | 默认使用当前页面截图 |
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (e) {
console.log(e)
return {
title:'转发内容',
path:'/pages/home/home',
imageUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576818531394&di=e4d379ce6951a1425a27855731e1b79d&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg'
}
}
五、点击 tabBar时触发事件 onTabItemTap
参数 | 类型 | 说明 |
|
| 被点击 |
|
| 被点击 |
|
| 被点击 |
// 点击tabBar触发事件
onTabItemTap(item){
console.log(item.index)// 1
console.log(item.pagePath)// pages/tabMessage/tabMessage
console.log(item.text)// 消息
}