微信小程序使用组件自定义吐司弹出效果

前言

微信小程序的消息提示框有字数限制，图标只包括‘成功’、‘加载’、‘无’。在实际开发过程中，当UI给出的设计图稿与微信小程序默认提供的消息提示框存在较大差异时，我们就不能再使用微信小程序的消息提示框，而应该使用组件定制消息提示框组件。

翻译

步骤1:初始化组件

创建一个新的组件文件夹，用于存储我们将来开发的所有定制组件。

然后在Components文件夹中创建一个Toast文件夹，右键单击Toast创建一个新的组件，然后自动创建相应的wxml、wxss、js和json文件。

步骤2:组件的相关配置

将toast.json中的组件设置为true

toast.json:

{'component': true，//自定义组件声明' usingComponents': {} //可选，用于引用其他组件}，然后在toast.wxml文件中编写弹出组件的模板，在toast.wxss文件中编写组件的样式。

toast.wxml:

！-components/Toast/Toast . wxml-view class=' mask ' hidden=' { { IsShow } } ' image class=' image ' src='././images/{{icon}}。png ' mode=' AspectFit '/image view class=' info ' { information } }/view/view toast . wxss:

/*组件/Toast/toast.wxss */。mask { width: 400rpxheight: 300rpx边界半径：10 rpx；位置：固定；z-index : 1000；top: 300rpxleft: 175rpxbackground: rgba(0，0，0，0.6)；}.图像{ z-index : 1000；宽度： 120 rpx；height: 120rpx左边距left: 140rpx}.信息{ margin-top :50 rpx；z-index : 1000；文本对齐：中心；color: # ffffff} width: 400rpxheight: 300rpx边界半径：10 rpx；位置：固定；z-index : 1000；top: 300rpxleft: 175rpxbackground: rgba(0，0，0，0.6)；}.图像{ z-index : 1000；宽度： 120 rpx；height: 120rpx左边距left:80rpx}.信息{ margin-top :50 rpx；z-index : 1000；文本对齐：中心；color: # ffffff}步骤3:定义属性、数据和事件

您可以看到变量{{isShow}}、{{icon}}和{{information}}出现在toast.wxml文件中，因为组件模板可以根据传入的属性动态更改。

toast.js :

//components/toast/toast . js component({/* * *组件属性列表*/properties 3360 {//define component attribute information 3360 {//用于显示提示信息type3360string，//type(必选)，目前接受的类型包括：string、number、boolean、object、array、null(对于任何类型)value : ' prompt information '/attribute的初始值(可选)；如果未指定，将根据类型选择图标类型{ icon 3360 } {//的图标。我在images文件夹中存储了两个成功和失败的图标：type:string，value:' success'}，show time 3360 {//弹出窗口开始显示的时间单位是mstype3360 number，value:1000}。HideTime: {//弹出窗口开始隐藏的时间单位是mstype: number，value: 1000}}，/* * *组件的初始数据*/data: {isshow3360 true}，/* * *组件的方法列表*/methods : { show toast 3360 function。setTimeout(函数(){ that.setData({ isShow:that . data . IsShow })；}，即. data . show time)；}，hideToast:函数(e) {让那个=这个；setTimeout(函数(){ that.setData({ isShow:that . data . IsShow })；}，即. data . HideTime)；} }})步骤4:使用弹出窗口/strong

既然toast组件模板已经完成，下一步就是在需要显示这个弹出窗口的页面中使用它。

Index.json:引入组件

{ ' using ComPonents ' : { ' Toast ' : '/ComPonents/Toast/Toast ' } } index . wxml:

！-page/index/index . wxml-view class=' container ' toast id=' toast ' information='提交成功。我们将尽快与您联系' icon=' success ' show time=' 1000 ' hide time=' 2000 '/toast button type=' primary ' bind tap=' show ' display popup/button/view index . js:

//page/index/index . js page({/* * * page的初始数据*/data: {}，show: function () {this。toast . show toast()；this . toast . HideToast()；}，/* * *生命周期函数-监控页面加载*/onload :函数(选项){}，/* * *生命周期函数-监控页面首次渲染完成*/onready 3360函数(){this。吐司=这个。select component(' # toast ')；}，/** *生命周期函数-监控页面显示*/onShow:函数(){}，/* * *生命周期函数-监控页面隐藏*/onHide:函数(){}，/* * *生命周期函数-监控页面卸载*/onunload 3360函数(){}，/* * *页面相关事件处理函数-监控用户下拉操作*/onpulldown refresh 3360 function(){ }，/* * *页面自下而上事件的处理函数*/onrechtoom 3360 function(){ }到目前为止，我们已经完成了定制吐司组件的步骤。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。