深蓝互联专注深圳小程序开发、微网站、O2O系统、APP开发和深圳网站建设欢迎咨询邮箱：wisepu@szdbi.com   电话：13530005652   联系我们   ｜   网站地图   



小程序开发之弹出框

来源：     发布：     点击：次
小程序开发过程中，很多地方为了便利我们多采用小程序自带弹出框来实现交互效果。这也够大多数开发使用，下面我给大家详细介绍下小程序弹出框
官方api传送门：https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html?search-key=wx.show
  • wx.showToast()
    • title：显示的提示信息，在没有图标的情况下，文本内容可显示两行
    • icon:  显示的图标
      • success：成功图标
      • loading：加载图标
      • none：没有图标
    • image：自定义显示的图标，优先级高于icon
    • duration：延迟的时间，弹出框弹出后的显示时间
    • mask：true/false是否显示遮罩层
    • success：接口调用成功的回调函数
    • fail：接口调用失败的回调函数
    • complete：不管成功还是失败都会执行的函数
注：一般在点击事件中调用，可结合使用wx.hideTotast来使用，

  • wx.showLoading()
    • title：加载的提示信息eg：玩命加载中...
    • mask：是否现思遮罩层
    • success：接口调用成功的回调函数
    • fail：接口调用失败的回调函数
    • complete：无论成功还是失败都会执行的函数
注：一般需要结合使用wx.hideLoading()；来使用可分别在onLoad和onReady中使用，数据渲染完成后关闭

  • wx.showModal()
    • title：提示信息的标题
    • content：提示信息的内容
    • showCancel：true/false是否显示取消按钮
    • cancelText：取消按钮的文本内容，不得超过四个字符
    • cancelColor：取消按钮的文本颜色，默认#000000
    • confirmText：确认按钮的文本内容，不得超过四个字符
    • confirmColor：却惹按钮的文本颜色，默认#000000
    • success：接口成功的回调
    • fail：接口失败的回调
  • complete：无论成功或失败都会嗲用
注：一般带年纪确认或取消，我们需要在success中进行事件的判断处理
1
2
3
4
5
6
7
8
9
10
11		 wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})

　　


  • wx.showActionSheet()
    • itemList: 底部弹出的信息元素为数组。
    • success：成功的回调
    • fail：失败的回调
1
2
3
4
5
6
7
8
9		 wx.showActionSheet({
    itemList: ['A', 'B', 'C'],
    success: function(res) {
        console.log(res.tapIndex)
    },
    fail: function(res) {
        console.log(res.errMsg)
    }
})

　　


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


这里的话需要用到小程序自带的picker组件，picker一共分为三类
  • 普通选择器：mode = selector
    • range：下拉列表的数据，为一个obj或array。只有当mode=selector或者 mode= multiSelector时有效。
    • range-key：当range为对象时，range-key用来指定显示对象的哪一个属性上的属性值
    • value：下拉项的下标，可通过改变该属性来实现确定后数据的对应渲染。
    • bindchange：value改变时触发
    • bindcancel：取消或者点击遮罩层的时候触发
    • disabled：true/false是否禁用
1
2
3
4
5		 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
    当前选择：{{array[index]}}
    </view>
</picker>

　　


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

　　


 
  • 多列选择器：mode = multiSelector
    • range：下拉列表的数据，通过二位三位数组来表示对应列的数据。只有当mode=selector或者 mode= multiSelector时有效。
    • range-key： 当 range是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
    • value：是一个数组，依次对应每一列的下标。从0开始
    • bindchange：点击确定后触发的事件，返回当前的所有列的行元素所在的下标
    • bindcolumnchange：value改变时触发，返回的值为第几列第几行下标发生变化。
    • bindcancel：取消选择或点击遮罩层时触发
1
2
3
4
5
6
7
8		 <view class="section">
    <view class="section__title">多列选择器</view>
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
        <view class="picker">
当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
        </view>
    </picker>
</view>

　　


 
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		 Page({
    /**
    *multiArray：多列选择的二位数组
    *multiIndex：默认显示的每列的下标
   &nb

相关文章

无相关信息
返回列表


深圳市龙华新区龙观西路2号宝龙大厦A903（与布龙路交汇处）

  • 服务热线：0755-23110995
  • 24小时咨询：13530005652
  • 邮箱：wisepu@szdbi.com

关注深蓝互联公众号

© 2008-2019深圳市深蓝互联科技有限公司 粤ICP备13020870号
深圳10年各类系统软件开发经验、擅长开各类网站、APP、小程序 、O2O商城、金融区块链系统设计开发。