我的知识记录分享

我的知识记录分享

3.3 点击事件

2020-10-9 糖果小宝 小程序学习

事件是视图层到逻辑层的通信方式，当我们点击tap、触摸touch、长按longpress小程序绑定了事件的组件时，就会触发事件，执行逻辑层中对应的事件处理函数。

小程序框架的视图层由 WXML 与 WXSS 来编写的，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

3.3.1 页面滚动

使用开发者工具新建一个tapevent的页面（直接在app.json的pages配置项第一行添加一个tapevent的页面，由于是第一项，这样就可以成为小程序的首页呈现出来），然后将以下代码输入到tapevent.wxml文件里： 




	<button type="primary" bindtap="scrollToPosition">滚动到页面指定位置</button> <view class="pagetop" style="background-color:#333;width:100%;height:400px"></view> <button type="primary" bindtap="scrollToTop">滚动到页面顶部（返回顶部）</button> <view id="pageblock" style="background-color:#333;width:100%;height:400px"></view>

这里的 type="primary"只是引入weui给button添加的样式。而函数名scrollToPosition和scrollToTop是可以自己定义的，然后我们再来在相应的js文件里要添加和函数名scrollToPosition和scrollToTop对应的事件处理函数。

在tapevent.js的Page({})里（也就是和 data:{}、 onLoad: function (options) { }等函数平级），输入以下代码： 




	scrollToTop() {
	wx.pageScrollTo({ scrollTop: 0, duration: 300 })
},

scrollToPosition() {
	wx.pageScrollTo({ scrollTop: 6000, duration: 300 })
},

当用户点击该button组件的时候会在该页面对应的Page中找到相应的事件处理函数。保存编译之后，看看是不是就有了页面滚动的效果了？原理是scrollToTop()和scrollToPosition()这两个函数实际上都是调用了同一个小程序的滚动API wx.pageScrollTo()，关于该API的具体参数信息，我们可以查阅技术文档。

滚动API技术文档：wx.pageScrollTo(Object object)

在官方文档我们可以看到wx.pageScrollTo()的作用是将页面滚动到目标位置，支持选择器和滚动距离两种方式定位

  • scrollTop滚动到页面的目标位置，单位 px，值为0就是滚动到顶部；值为600就是
  • duration是滚动动画的时长，单位为ms，而1秒=1000毫秒

那如何滚动到指定的选择器的位置呢？前面我们已经给view分别添加了id和class的选择器，只需要将之前的函数的配置信息修改为如下（注意哦，如果你是添加而不是修改，函数名会冲突的，或者你可以起其他的函数名）： 




	scrollToTop() {
	wx.pageScrollTo({ duration: 3000, selector:".pagetop" })
},

scrollToPosition() {
	wx.pageScrollTo({ duration: 300, selector:"#pageblock" })
},

小任务： 如果只是在组件上绑定了事件也就是只有 bindtap="scrollToPosition"，但是并没有在js文件里写相应的事件处理函数scrollToPosition，看一下控制台Console会报什么错？

不要误以为只有button组件才可以绑定事件哦，还记得我们小程序组件里看的技术文档小程序组件吗？在公共属性部分，可以看到所有组件都有以下属性bind* / catch*，这个属性的类型是EventHandler，bindtap就是bind*的一个类型。也就是说小程序的所有组件都可以通过以上方法触发事件处理函数，达到滚动等效果。使用button为案例只是为了便于展示而已。

命名规范：JavaScript的项目名、函数名、变量等都应该遵循简洁、语义化的原则。函数名推荐使用驼峰法来命名(camelCase)，比如scrollToTop、pageScrollTo，也就是由小写字母开始，后续每个单词首字母都大写，长得跟骆驼

« 3.4 页面渲染 | 3.2 小程序API实战»

发表评论：