弹出层选择支付方式html,微信小程序从入坑到放弃之十七：picker实现弹窗支付选择特效...

摘要：

微信小程序中官方提供了一个picker组件，目前有5种功能，分别是：普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器......

在上次的微信小程序之商城项目页面中，支付订单页面有一个picker弹层支付选择的特效，长这个样子。如图：微信小程序之商城项目的支付订单页面支付方式特效

本以为需要自己造轮子的，没想到官方已经提供了picker组件和demo，还是蛮贴心的嘛！文档地址：

developers.weixin.qq.com/miniprogram/dev/component/picker.html

下面就来说下如何实现我们项目需求吧。

一、思路

由于这个支付功能是一列的，所以我们可以使用普通选择器mode = selector来实现，直接上代码吧。

二、特效代码

首先是wxml页面，只需要3行代码即可。

1.1、wxml代码

{ {payData[i]}}

此时保存后没有效果，接下来需要写一点js代码。

1.2、js代码

data: {

payData:['微信支付','银行卡支付','刷脸支付'],

i:0

}

此时再保存，前台就有效果了。然