小程序开发之弹出框

朴灿烈づ我的快乐病毒、 2023-01-20 14:56 6阅读 0赞

小程序开发过程中，很多地方为了便利我们多采用小程序自带弹出框来实现交互效果。这也够大多数开发使用，下面我给大家详细介绍下小程序弹出框

官方api传送门：[https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html?search-key=wx.show][https_developers.weixin.qq.com_miniprogram_dev_api_api-react.html_search-key_wx.show]

![8deb17ce03420351d0373516023f0e91.png][]

*  wx.showToast()
    
     *  title：显示的提示信息，在没有图标的情况下，文本内容可显示两行
     *  icon:  显示的图标
        
         *  success：成功图标
         *  loading：加载图标
         *  none：没有图标
     *  image：自定义显示的图标，优先级高于icon
     *  duration：延迟的时间，弹出框弹出后的显示时间
     *  mask：true/false是否显示遮罩层
     *  success：接口调用成功的回调函数
     *  fail：接口调用失败的回调函数
     *  complete：不管成功还是失败都会执行的函数

注：一般在点击事件中调用，可结合使用wx.hideTotast来使用，

--------------------

![4104d5f17294639880e74bf3c0f08e9c.png][]

*  wx.showLoading()
    
     *  title：加载的提示信息eg：玩命加载中...
     *  mask：是否现思遮罩层
     *  success：接口调用成功的回调函数
     *  fail：接口调用失败的回调函数
     *  complete：无论成功还是失败都会执行的函数

注：一般需要结合使用wx.hideLoading()；来使用可分别在onLoad和onReady中使用，数据渲染完成后关闭

--------------------

![e5dba0cc3a43667ff5f9f7adedba0eed.png][]

*  wx.showModal()
    
     *  title：提示信息的标题
     *  content：提示信息的内容
     *  showCancel：true/false是否显示取消按钮
     *  cancelText：取消按钮的文本内容，不得超过四个字符
     *  cancelColor：取消按钮的文本颜色，默认\#000000
     *  confirmText：确认按钮的文本内容，不得超过四个字符
     *  confirmColor：却惹按钮的文本颜色，默认\#000000
     *  success：接口成功的回调
     *  fail：接口失败的回调
 *  complete：无论成功或失败都会嗲用

注：一般带年纪确认或取消，我们需要在success中进行事件的判断处理

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>wx.showModal({ </code> <code>title:&nbsp;</code><code>'提示'</code><code>,</code> <code>content:&nbsp;</code><code>'这是一个模态弹窗'</code><code>,</code> <code>success: function(res) { </code> <code>if</code>&nbsp;<code>(res.confirm) { </code> <code>console.log(</code><code>'用户点击确定'</code><code>)</code> <code>}&nbsp;</code><code>else</code>&nbsp;<code>if</code>&nbsp;<code>(res.cancel) { </code> <code>console.log(</code><code>'用户点击取消'</code><code>)</code> <code>}</code> <code>}</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

--------------------

![5fe42d633121fe0fbc19e78e6398096a.png][]

*  wx.showActionSheet()
    
     *  itemList: 底部弹出的信息元素为数组。
     *  success：成功的回调
     *  fail：失败的回调

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>wx.showActionSheet({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>itemList: [</code><code>'A'</code><code>,&nbsp;</code><code>'B'</code><code>,&nbsp;</code><code>'C'</code><code>],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success: function(res) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(res.tapIndex)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fail: function(res) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(res.errMsg)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

注：bug是当数组中的元素较多时，弹出框的高度会很高，且不能上下滑动，因此，大家可以看我总结的小程序开发之组件的简单使用，这篇中我有总结弹出框组件的封装。

--------------------

![af56f19549cbfe1cc93f1e8a9c30aa3c.png][]

这里的话需要用到小程序自带的picker组件，picker一共分为三类

*  普通选择器：mode = selector
    
     *  range：下拉列表的数据，为一个obj或array。只有当mode=selector或者 mode= multiSelector时有效。
     *  range-key：当range为对象时，range-key用来指定显示对象的哪一个属性上的属性值
     *  value：下拉项的下标，可通过改变该属性来实现确定后数据的对应渲染。
     *  bindchange：value改变时触发
     *  bindcancel：取消或者点击遮罩层的时候触发
     *  disabled：true/false是否禁用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>&lt;picker bindchange=</code><code>"bindPickerChange"</code>&nbsp;<code>value=</code><code>"{ {index}}"</code>&nbsp;<code>range=</code><code>"{ {array}}"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"picker"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>当前选择：{ {array[index]}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/view&gt;</code> <code>&lt;/picker&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>Page({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*array：普通选择器下拉的数据</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*index：默认显示的时下标为0的数据</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>array: [</code><code>'美国'</code><code>,&nbsp;</code><code>'中国'</code><code>,&nbsp;</code><code>'巴西'</code><code>,&nbsp;</code><code>'日本'</code><code>],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>index: 0,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}，</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>bindPickerChange: function (e) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'picker下拉项发生变化后，下标为：'</code><code>, e.detail.value)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.setData({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>index: e.detail.value</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

![7fc91dc6f0d3ba914d1fde7769daed93.png][]

*  多列选择器：mode = multiSelector
    
     *  range：下拉列表的数据，通过二位三位数组来表示对应列的数据。只有当mode=selector或者 mode= multiSelector时有效。
     *  range-key： 当 range是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
     *  value：是一个数组，依次对应每一列的下标。从0开始
     *  bindchange：点击确定后触发的事件，返回当前的所有列的行元素所在的下标
     *  bindcolumnchange：value改变时触发，返回的值为第几列第几行下标发生变化。
     *  bindcancel：取消选择或点击遮罩层时触发

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"section"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"section__title"</code><code>&gt;多列选择器&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;picker mode=</code><code>"multiSelector"</code>&nbsp;<code>bindchange=</code><code>"bindMultiPickerChange"</code>&nbsp;<code>bindcolumnchange=</code><code>"bindMultiPickerColumnChange"</code>&nbsp;<code>value=</code><code>"{ {multiIndex}}"</code>&nbsp;<code>range=</code><code>"{ {multiArray}}"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"picker"</code><code>&gt;</code> <code>当前选择：{ {multiArray[0][multiIndex[0]]}}，{ {multiArray[1][multiIndex[1]]}}，{ {multiArray[2][multiIndex[2]]}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/picker&gt;</code> <code>&lt;/view&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 </td> 
 <td> <code>Page({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*multiArray：多列选择的二位数组</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*multiIndex：默认显示的每列的下标</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>multiArray: [[</code><code>'无脊柱动物'</code><code>,&nbsp;</code><code>'脊柱动物'</code><code>], [</code><code>'扁性动物'</code><code>,&nbsp;</code><code>'线形动物'</code><code>,&nbsp;</code><code>'环节动物'</code><code>,&nbsp;</code><code>'软体动物'</code><code>,&nbsp;</code><code>'节肢动物'</code><code>], [</code><code>'猪肉绦虫'</code><code>,&nbsp;</code><code>'吸血虫'</code><code>]],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>multiIndex: [0, 0, 0],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}，</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>bindMultiPickerChange: function (e) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.setData({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>multiIndex: e.detail.value</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>bindMultiPickerColumnChange: function (e) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(e);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>data = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>multiArray:&nbsp;</code><code>this</code><code>.data.multiArray,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>multiIndex:&nbsp;</code><code>this</code><code>.data.multiIndex</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiIndex[e.detail.column] = e.detail.value;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>switch</code>&nbsp;<code>(e.detail.column) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>0:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>switch</code>&nbsp;<code>(data.multiIndex[0]) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>0:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[1] = [</code><code>'扁性动物'</code><code>,&nbsp;</code><code>'线形动物'</code><code>,&nbsp;</code><code>'环节动物'</code><code>,&nbsp;</code><code>'软体动物'</code><code>,&nbsp;</code><code>'节肢动物'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[2] = [</code><code>'猪肉绦虫'</code><code>,&nbsp;</code><code>'吸血虫'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>1:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[1] = [</code><code>'鱼'</code><code>,&nbsp;</code><code>'两栖动物'</code><code>,&nbsp;</code><code>'爬行动物'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[2] = [</code><code>'鲫鱼'</code><code>,&nbsp;</code><code>'带鱼'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiIndex[1] = 0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiIndex[2] = 0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>1:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>switch</code>&nbsp;<code>(data.multiIndex[0]) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>0:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>switch</code>&nbsp;<code>(data.multiIndex[1]) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>0:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[2] = [</code><code>'猪肉绦虫'</code><code>,&nbsp;</code><code>'吸血虫'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>1:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[2] = [</code><code>'蛔虫'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>2:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[2] = [</code><code>'蚂蚁'</code><code>,&nbsp;</code><code>'蚂蟥'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>3:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[2] = [</code><code>'河蚌'</code><code>,&nbsp;</code><code>'蜗牛'</code><code>,&nbsp;</code><code>'蛞蝓'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>4:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[2] = [</code><code>'昆虫'</code><code>,&nbsp;</code><code>'甲壳动物'</code><code>,&nbsp;</code><code>'蛛形动物'</code><code>,&nbsp;</code><code>'多足动物'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>1:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>switch</code>&nbsp;<code>(data.multiIndex[1]) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>0:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[2] = [</code><code>'鲫鱼'</code><code>,&nbsp;</code><code>'带鱼'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>1:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[2] = [</code><code>'青蛙'</code><code>,&nbsp;</code><code>'娃娃鱼'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>2:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiArray[2] = [</code><code>'蜥蜴'</code><code>,&nbsp;</code><code>'龟'</code><code>,&nbsp;</code><code>'壁虎'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.multiIndex[2] = 0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// console.log(data.multiIndex);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.setData(data);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

![cf46a67c25f7af64ab9165dde220ff08.png][]

*  时间选择器：mode = time
 *  value：表示选中的时间，时间格式为 hh:mm
 *  start：表示时间的开始点，格式为hh:mm
 *  end：表示时间的街书店，格式为hh:mm
 *  bindchange：点击确定的时候触发，返回value值，返回的是选中的时间，
 *  bindcancel：点击取消时或点击遮罩层时触发
 *  disabled：true/false是否禁用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"section"</code><code>&gt;</code> <code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"section__title"</code><code>&gt;时间选择器&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;picker mode=</code><code>"time"</code>&nbsp;<code>value=</code><code>"{ {time}}"</code>&nbsp;<code>start=</code><code>"09:01"</code>&nbsp;<code>end=</code><code>"21:01"</code>&nbsp;<code>bindchange=</code><code>"bindTimeChange"</code>&nbsp;<code>bindcancel=</code><code>"cancel"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"picker"</code><code>&gt;</code> <code>当前选择: { {time}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/picker&gt;</code> <code>&lt;/view&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>Page({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*time：选择的时间</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>time:&nbsp;</code><code>'12:01'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}，</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>bindTimeChange: function (e) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// console.log('picker发送选择改变，携带值为', e.detail.value)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.error(e);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.setData({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>time: e.detail.value</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

![ed3ab3e4339a8a1d0520f646ca4155d0.png][]

*  日期选择器：mode = data
    
     *  value： 表示选中的日期，格式为"YYYY-MM-DD"
     *  start： 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
     *  end： 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
     *  fields：参数（year，month，day）表示日期的粒度，为year时，下拉下标只显示年份选择，为month时会显示year，month，为day时会显示year，month，day
     *  bindchange：点击确定的时候触发，返回的值为选择的时间
     *  bindcancel：点击取消时或点击遮罩层时触发
     *  disabled：true/false是否禁用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"section"</code><code>&gt;</code> <code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"section__title"</code><code>&gt;日期选择器&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;picker mode=</code><code>"date"</code>&nbsp;<code>value=</code><code>"{ {date}}"</code>&nbsp;<code>start=</code><code>"2015-09-01"</code>&nbsp;<code>end=</code><code>"2017-09-01"</code>&nbsp;<code>bindchange=</code><code>"bindDateChange"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"picker"</code><code>&gt;</code> <code>当前选择: { {date}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/picker&gt;</code> <code>&lt;/view&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>Page({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*data：选择的日期</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data: {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date:&nbsp;</code><code>'2016-09-01'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}，</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>bindDateChange: function (e) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'picker发送选择改变，携带值为'</code><code>, e.detail.value)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.setData({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date: e.detail.value</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

![83f4e9cabd53a07f21db975cc9b3fc49.png][]

*  省市区选择器：mode = region
    
     *  value：  表示选中的省市区，默认选中每一列的第一个值
     *  custom-item： 可为每一列的顶部添加一个自定义的项
     *  start： 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
     *  end： 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
     *  fields：参数（year，month，day）表示日期的粒度，为year时，下拉下标只显示年份选择，为month时会显示year，month，为day时会显示year，month，day
     *  bindchange：点击确定的时候触发， value 改变时触发 change 事件，event.detail = \{value: value, code: code, postcode: postcode\}，其中字段code是统计用区划代码，postcode是邮政编码
     *  bindcancel：点击取消时或点击遮罩层时触发
     *  disabled：true/false是否禁用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"section"</code><code>&gt;</code> <code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"section__title"</code><code>&gt;省市区选择器&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;picker mode=</code><code>"region"</code>&nbsp;<code>bindchange=</code><code>"bindRegionChange"</code>&nbsp;<code>value=</code><code>"{ {region}}"</code>&nbsp;<code>custom-item=</code><code>"{ {customItem}}"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;view&nbsp;</code><code>class</code><code>=</code><code>"picker"</code><code>&gt;</code> <code>当前选择：{ {region[0]}}，{ {region[1]}}，{ {region[2]}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/picker&gt;</code> <code>&lt;/view&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>Page({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*time：选择的时间</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data: {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>region: [</code><code>'广东省'</code><code>,&nbsp;</code><code>'广州市'</code><code>,&nbsp;</code><code>'海珠区'</code><code>],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>customItem:&nbsp;</code><code>"全部"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}，</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>bindRegionChange: function (e) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'picker发送选择改变，携带值为'</code><code>, e.detail.value)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.setData({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>region: e.detail.value</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

[https_developers.weixin.qq.com_miniprogram_dev_api_api-react.html_search-key_wx.show]: https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html?search-key=wx.show
[8deb17ce03420351d0373516023f0e91.png]: /images/20221021/475cb5ef6edb4274b1d161297a63dab5.png
[4104d5f17294639880e74bf3c0f08e9c.png]: /images/20221021/485af145fedc4ce39ddf82988bfce647.png
[e5dba0cc3a43667ff5f9f7adedba0eed.png]: /images/20221021/aeb5a9755eaa4c2ba2a158d247b9d72c.png
[5fe42d633121fe0fbc19e78e6398096a.png]: /images/20221021/ca3181d74e8446c195c850cbdd9973b7.png
[af56f19549cbfe1cc93f1e8a9c30aa3c.png]: /images/20221021/670916bac0ed47a797120435bd234d2a.png
[7fc91dc6f0d3ba914d1fde7769daed93.png]: /images/20221021/e8569d98d144484ca8b5f871e81345ae.png
[cf46a67c25f7af64ab9165dde220ff08.png]: /images/20221021/1da680e0e57244cb95ced8aea38a38e8.png
[ed3ab3e4339a8a1d0520f646ca4155d0.png]: /images/20221021/40b6a31c5ad34f1eb2f4e0de7ddae3c9.png
[83f4e9cabd53a07f21db975cc9b3fc49.png]: /images/20221021/d894d4bd3afd41a794f9f88c1f37f7c8.png