深圳
专注物联网软硬件开发15年
咨询电话

13530005652

推荐新闻
小程序开发之弹出框
发布者：深蓝互联
发布时间：2019-12-09
点击：次
小程序开发过程中，很多地方为了便利我们多采用小程序自带弹出框来实现交互效果。这也够大多数开发使用，下面我给大家详细介绍下小程序弹出框
官方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

深蓝互联成立于2013年，是一家物联网硬件开发及软件应用服务商，获得多次获得国家高新技术企业资质的企业。深蓝互联专注软硬件技术开发的专业性技术公司。我们从事软硬件开发十年，擅长SaaS 平台开发、APP小程序开发、软硬件结合开发，在视觉识别处理、数据架构、云计算、多线程高并发和集群、数据安全加密和防护方便有很深的技术积累。

 

我们拥有专业优秀的设计和技术团队，以极具创意的 UI 设计、精湛卓越的开发技术，专业的网络策划团队。公司多年来投入打造物联网SaaS平台，集成了公司研发的多款智能物联网终端（智能鲜米机、生鲜售货机、自助洗车机、小区电瓶车充电系统等）。

 

公司一直坚持以研发为导向，打造软硬件结合的物联网平台系统。将一直坚持提高开发的技术实力更好的为我们的客户服务！

 

文章来自深蓝互联http://www.szdbi.com/webxt/340.html转载请注明出处！

上一篇：vue2.0构建淘票票webapp

下一篇：微信小程序wxss设置样式

返回列表
  • 联系地址
    中国 深圳 龙华新区龙观西路2号宝龙大厦A903
  • 联系电话
    电话：13530005652 / 0755-23110995
  • 电子邮箱
    wisepu@szdbi.com
关注深蓝互联公众号
Copyright © 2013-2024 深蓝互联 版权所有
粤ICP备13020870号
友情链接： 成都网站建设 北京小程序开发 淄博网站建设 短视频获客 东莞网站建设 成都小程序开发 新行业加盟 服务器租赁 济南网站建设 深圳发电机出租