小程序中的事件

1,什么是事件?

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上,当组件触发事件,就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息,如 id, dataset, touches。

2,触摸事件   bindtop

page中写相应的事件函数,事件参数是event

3,bindinput绑定文本框输入事件

 page中写相应的事件函数,事件参数是event

4,data和文本框之间的数据同步

在文本框的 input 事件处理函数中,通过事件参数 event,能够访问到文本框的最新值:

语法:event.detail.value

5,修改data中的数据

通过 this.setData(dataObject) 方法,可以给页面中的 data 数据重新赋值。

例如:监听文本框的数据变化,并把最新的值赋值给 data 中的 msg

示例代码如下:

6,事件传参

(1)不能绑定事件时同时传参

此代码不能正常工作,因为小程序会把 bindtap 后指定的值,统一当作事件名称来处理

(2).通过 data-* 自定义属性传参

info作为参数名,值是123

页面事件

(1)下拉

1.启用下拉刷新

(1)需要在 app.json 的 window 选项中或页面配置中开启 enablePullDownRefresh。但是,一般情况下,推荐在页面配置中为需要的页面单独开启下拉刷新行为。

(2)可以通过 wx.startPullDownRefresh() 触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

2.配置下拉刷新窗口的样式

需要在 app.json 的 window 选项中或页面配置中修改 backgroundColor 和 backgroundTextStyle 选项。

backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持16进制颜色值

backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light监听

3.页面的下拉刷新事件

为页面添加 onPullDownRefresh() 函数,可以监听用户在当前页面的下拉刷新事件

当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,所以需要手动隐藏下拉刷新的 loading 效果。此时,调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。

(2)上拉

概念:在移动端,随着手指不断向上滑动,当内容将要到达屏幕底部的时候,页面会随之不断的加载后续内容,直到没有新内容为止,我们称之为上拉加载更多。上拉加载更多的本质就是数据的分页加载。

应用场景:在移动端,列表数据的分页加载,首选的实现方式就是上拉加载更多

配置上拉触底的距离

可以在 app.json 的 window 选项中或页面配置中设置触底距离 onReachBottomDistance。单位为px,默认触底距离为 50px。

监听页面的上拉触底事件

为页面添加 onReachBottom() 函数,可以监听用户在当前页面的上拉触底事件,从而实现上拉加载更多列表数据的效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。