支付宝小程序下拉刷新、联系人、选择城市、画布、

378 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第22天,点击查看活动详情

下拉刷新

  1. my.startPullDownRefresh:my.startPullDownRefresh 是主动开启下拉刷新的 API。当处理完数据刷新后,[my.stopPullDownRefresh] 可停止当前页面的下拉刷新。

image.png
示例代码:

image.png 2. my.stopPullDownRefresh:my.stopPullDownRefresh 是停止当前页面的下拉刷新的 API

image.png 3. onPullDownRefresh:onPullDownRefresh 可以监听该页面的用户下拉刷新事件。需要在 app.json 的 window 选项中配置 "allowsBounceVertical": "YES",并且在页面对应的 .json 文件中配置 "pullRefresh": true,当前页面才允许下拉刷新。可以调用 [my.startPullDownRefresh]主动触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致,可以触发 onPullDownRefresh 事件监听。但 my.startPullDownRefresh 不受 onPullDownRefresh 的 allowsBounceVerticalpullRefresh 参数影响。

image.png

image.png

image.png

image.png

联系人

  1. my.choosePhoneContact:my.choosePhoneContact 是选择系统通讯录中某个联系人电话的 API

image.png

image.png

image.png 2. my.chooseAlipayContact:my.chooseAlipayContact 是用于唤起支付宝通讯录,选择一个或者多个支付宝联系人的 API。

image.png

image.png

image.png
注意:返回的 mobileemail 字段不一定全部有值,取决于所选取联系人的支付宝账号类型是手机号还是邮箱

image.png

image.png 3. my.chooseContact:my.chooseContact 是唤起选择联系人的 API,默认只包含支付宝联系人,可通过修改参数选择手机通讯录联系人或者双向通讯录联系人

image.png

success 回调函数

说明:当用户没有选择任何联系人时,返回也是 success,但是返回值为空。

success 回调函数会携带一个 Object 类型的对象,其属性如下:

image.png

image.png

选择城市

  1. my.chooseCity:my.chooseCity 是打开城市选择列表的 API。

image.png

image.png

image.png
示例代码:

image.png

image.png 2. ChooseCityTask:一个可以监听地理位置定位完成事件,以及修改默认定位城市名称的对象

使用限制

  • 基础库 [2.8.0]、客户端 10.2.70 开始支持,低版本需要做 [兼容处理]。
  • [my.chooseCity]入参 showLocatedCitysetLocatedCity 需同时设置为 trueChooseCityTask.onLocatedComplete 才会触发
  • 此 API 暂仅支持企业支付宝小程序使用。

方法

ChooseCityTask.onLocatedComplete

功能描述

监听地理位置定位完成事件。

入参

function callback
地理位置定位完成事件的回调函数。

image.png 3. my.chooseDistrict:my.chooseDistrict 打开地区选择器。

地区选择器内置数据境内外及港澳台城市数据,可进行差量自定义,也可全量自定义,并可通过在数据中指定 subList 支持级联选择。

image.png

image.png

image.png 4. my.regionPicker:my.regionPicker 是唤起多级省市区选择器的 API,自带省市区数据源

image.png

image.png

image.png

image.png
示例代码:

image.png 5. my.onLocatedComplete:my.onLocatedComplete 是监听地理位置定位完成事件的 API,只针对 [my.chooseCity] 中属性 setLocatedCity 为 true 的情况。

推荐使用 my.chooseCity 所返回 [ChooseCityTask] 的 onLocatedComplete 方法替代 my.onLocatedComplete。

选择日期

  1. my.datePicker:my.datePicker 是打开日期选择列表的 API。

image.png

image.png

image.png
示例代码: image.png

动画

  1. my.createAnimation:my.createAnimation 是用于创建动画实例 animation 的 API。调用实例的方法来描述动画,最后通过动画实例的 export 方法将动画数据导出并传递给组件的 animation 属性。

image.png image.png
参数:

image.png

animation

my.createAnimation 创建的实例,实例可以调用以下方法来描述动画,调用结束后会返回实例本身,支持链式调用的写法。view 的 animation 属性初始化为 {} 时,在基础库 1.11.0(不包含 1.11.0)及以下版本会报错,建议初始化为 null

image.png

image.png

image.png

image.png

image.png

image.png

动画队列

  • 调用动画操作方法后,需调用 step() 用于表示一组动画完成,在一组动画中可以调用任意多个动画方法,一组动画中的所有动画会同时开始,当一组动画完成后才会进行下一组动画。
  • step() 可以传入一个跟 my.createAnimation() 一样的配置参数用于指定当前组动画的配置。

画布

画布实例,代表 AXML 中指定的 canvas 组件,包含一系列的属性和方法。

Canvas 的获取方法,请参考下文示例代码。

image.png
示例代码:

image.png image.png

image.png

image.png