微信小程序开发之十 —— 点击事件
文章目录
-
- 学习前后
- 页面滚动
- 消息提示框Toast
- 模态对话框
- 弹出操作菜单
学习前后
上一篇：微信小程序开发之九 —— JavaScript入门
下一篇：微信小程序开发之十一 —— 页面渲染
页面滚动
官方文档：wx.pageScrollTo(Object object)
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| scrollTop | number | / | 滚动到页面的目标位置，单位px |
| duration | number | 300 | 滚动动画的时长,单位ms |
| selector | string | / | 选择器 |
| success | function | / | 接口调用成功的回调函数 |
| fail | function | / | 接口调用失败的回调函数 |
| complete | function | / | 接口调用结束的回调函数（调用成功、失败都会执行） |
selector 语法
selector类似于 CSS 的选择器，但仅支持下列语法。
- ID选择器：#the-id
- class选择器（可以连续指定多个）：.a-class.another-class
- 子元素选择器：.the-parent > .the-child
- 后代选择器：.the-ancestor .the-descendant
- 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
- 多选择器的并集：#a-node, .some-other-nodes
之前的页面写得太多内容了，建议重新建一个页面来编写，在app.json的pages数组前面添加路径就可以了，记住，小程序首次加载的页面是pages数组的第一个页面的值。
我们在新建页面的.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>
其中的bindtap就是我们需要绑定的函数操作，bindtap里面的值是可以自由定义的，可以是任意字符串，然后我们在js文件的Page里面添加绑定的函数的操作，函数名跟bindtap后面的字符串要一致就可以了。
scrollToTop() {
wx.pageScrollTo({
scrollTop: 0,
duration: 300
})
},
scrollToPosition() {
wx.pageScrollTo({
scrollTop: 6000,
duration: 300
})
},
前面把wx这个跳过没有更，这里简单补充一下：
wx是小程序的全局对象，用于承载小程序能力相关 API
小程序开发框架提供丰富的微信原生 API
可以方便的调起微信提供的能力，如wx.getNetworkType
我们也可以使用选择的方式，把两个函数修改成如下方式：
scrollToTop() {
wx.pageScrollTo({
duration: 3000,
selector:".pagetop"
})
},
scrollToPosition() {
wx.pageScrollTo({
duration: 300,
selector:"#pageblock"
})
},
结果是一样的
消息提示框Toast
官方文档：wx.showToast(Object object)
itle：为必填，提示的内容
icon：只有三个选项，success、loading、none，大家可以自行测试一下三个不同取值的效果
duration：提示延迟的时间，默认为1500毫秒，也就是1.5秒
.wxml
<button type="primary" bindtap="toastTap">点击弹出消息对话框</button>
.js
toastTap() {
wx.showToast({
title: '学习成功',
icon: 'success',
duration: 2000
})
},
效果：
模态对话框
官方文档：wx.showModal(Object object)
这个看文档吧，还是文档比较完整，也不是很多。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | string | / | 提示的标题 |
| content | string | / | 提示的内容 |
| showCancel | boolean | true | 是否显示取消按钮 |
| confirmText | string | ‘确定’ | 确认按钮的文字，最多4个·字符 |
.wxml
<button type="primary" bindtap="modalTap">显示模态对话框</button>
.js
modalTap() {
wx.showModal({
title: '学习声明',
content: '学习小程序的开发是一件有意思的事情，我决定每天打卡学习',
showCancel: true,
confirmText: '确定',
success(res) {
if (res.confirm) {
console.log('用户点击了确定')
} else if (res.cancel) {
console.log('用户点击了取消')
}
}
})
},
效果：
弹出操作菜单
官方文档：wx.showActionSheet(Object object)
其中itemList属性是必填项，按钮的文字数组，数组长度最大为 6。
.wxml
<button type="default" bindtap="actionSheetTap">弹出操作菜单</button>
.js
actionSheetTap() {
wx.showActionSheet({
itemList: ['添加照片', '删除照片', '更新照片', '查询更多'],
success(e) {
console.log(e.tapIndex)
}
})
},
效果：
在官方文档里我们可以了解到，当用户点击的按钮序号，从上到下的顺序，从0开始，相当于对应着数组itemList的序号，这样就为我们以后根据不同的菜单选项来执行不同的操作提供了可能。
