微信小程序使用component自定义toast弹窗效果

前言

微信小程序自带的消息提示框有字数限制,而且图标仅仅只有"success","loading","none"。当我们在实际开发过程中,面对UI给的设计图稿和微信小程序默认提供的消息提示框具有很大差别的时候,自然就不能再使用微信小程序的消息提示框,而应当使用component自定义消息提示框组件。

效果图

Step1:初始化组件

新建一个components文件夹,这个文件夹用来存放我们以后要开发的所有自定义组件。

然后在components文件夹中创建Toast文件夹,在Toast上右击新建Component 之后就会自动创建相对应的wxml、wxss、js、json文件。

Step2:组件的相关配置

将toast.json 中component 设置为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:

/* components/Toast/toast.wxss */
.mask{
 width: 400rpx;
 height: 300rpx;
 border-radius:10rpx;
 position: fixed;
 z-index: 1000;
 top: 300rpx;
 left: 175rpx;
 background: rgba(0, 0, 0, 0.6);
}
.image{
 z-index: 1000;
 width: 120rpx;
 height: 120rpx;
 margin-left: 140rpx;
}
.info{
 margin-top:50rpx;
 z-index: 1000;
 text-align: center;
 color: #ffffff;
}
 width: 400rpx;
 height: 300rpx;
 border-radius:10rpx;
 position: fixed;
 z-index: 1000;
 top: 300rpx;
 left: 175rpx;
 background: rgba(0, 0, 0, 0.6);
}
.image{
 z-index: 1000;
 width: 120rpx;
 height: 120rpx;
 margin-left:80rpx;
}
.info{
 margin-top:50rpx;
 z-index: 1000;
 text-align: center;
 color: #ffffff;
}

Step3:定义属性、数据和事件

可以看到在toast.wxml文件中出现了{{isShow}}、{{icon}}、{{information}} 变量,这是为了组件模板能够根据传入的属性动态变化。

toast.js :

// components/Toast/toast.js
Component({
 /**
 * 组件的属性列表
 */
 properties: {    //定义组件属性
 information:{   //用来显示提示信息
  type: String,   // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
  value: '提示信息'  // 属性初始值(可选),如果未指定则会根据类型选择一个
 },
 icon:{     //图标类型,我在images文件夹中存放了success和fail的两个图标
  type:String,
  value:'success'
 },
 showTime:{    //弹窗开始显示的时间单位ms
  type: Number,
  value:1000
 },
 hideTime: {    //弹窗开始隐藏的时间单位ms
  type: Number,
  value: 1000
 }
 },
 /**
 * 组件的初始数据
 */
 data: {
 isShow:true
 },
 /**
 * 组件的方法列表
 */
 methods:{
 showToast:function () {
  let that = this;
  setTimeout(function () {
  that.setData({
   isShow: !that.data.isShow
  });
  }, that.data.showTime);
 },
 hideToast: function (e) {
  let that = this;
  setTimeout(function(){
  that.setData({
   isShow: !that.data.isShow
  });
  },that.data.hideTime);
 }
 }
})

Step4:使用弹窗/strong>

目前已经完成了toast组件模板,接下来就是在需要显示这个弹窗的页面中使用它。

index.json:引入组件

{
 "usingComponents": {
 "toast": "/components/Toast/toast"
 }
}

index.wxml:

<!--page/index/index.wxml-->
<view class="container">
 <toast id='toast'information="提交成功,我们会尽快和您联系" icon="success" showTime="1000" hideTime='2000'></toast>
 <button type="primary" bindtap="show"> 显示弹窗 </button>
</view>

index.js:

// page/index/index.js
Page({
 /**
 * 页面的初始数据
 */
 data: {

 },
 show:function(){
 this.toast.showToast();
 this.toast.hideToast();
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 this.toast = this.selectComponent("#toast");
 },
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },
 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

至此我们就完成了自定义toast组件的步骤。

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

(0)

相关推荐

  • 微信小程序实现漂亮的弹窗效果

    最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西-- 场面一度十分尴尬 可是得做啊,要不然产品大姐又要暴走了-- 好吧,来研究一下模态对话框的性质自己DIY吧~ 实现思路 模态对话框之所以被叫做"模态",就是因为在它弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的. 那么这样一来,我们的思路就很明确了: 1. 构建一个蒙层(mask),使得背景变暗,并且阻止用户对对话框外界面的这里写代码片点击事件: 2

  • 微信小程序实现自定义modal弹窗封装的方法

    前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo

  • 微信小程序带动画弹窗组件使用方法详解

    本文实例为大家分享了微信小程序带动画弹窗的具体代码,供大家参考,具体内容如下 基本效果如下: 具体实现如下: 第一步: 新建一个 components 文件夹,用于存放我们以后开发中的所用组件,在 components 组件中新建一个popup文件夹来存放我们的弹窗组件,在popup下右击新建 Component 并命名为 popup 后,会生成对应的 json wxml wxss js 4个文件,也就是一个自定义组件的组成部分,此时项目结构应该如下图所示: 第二步上代码: popup.wxml

  • 微信小程序自定义toast弹窗效果的实现代码

    微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的:但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了: 第一步:新建一个wxml文件用来装模板,方便以后使用,比如 然后在这里面添加模板代码 <template name="toast"> //nam

  • 微信小程序 弹窗自定义实例代码

    微信小程序 弹窗 首先wxml代码: <view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view> <view bindtap="clickArea">点击此处</view> 注:hidden属性用于切换比较频繁的地方. wxss代码设置弹窗样式: .myToast{ width:240rpx; height:130rpx; line-heig

  • 微信小程序实战之自定义模态弹窗(8)

    首先看看官方提供的模态弹窗,供大家参考,具体内容如下 api如下: 示例: 这样的模态弹窗,充其量只能做个alert,提示一下信息. 但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法 wxml: <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">button</view&

  • 微信小程序自定义弹窗wcPop插件

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的是自定义组件化开发,就是把弹出框封装成一个组件,然后多处调用. 解决了小程序开发自定义弹窗出现后,遮罩层下的页面仍可以滚动的方法: 给遮罩层的最外层view中加入catchtouchmove="preventTouchMove" 即可解决该遮罩层点透问题. 根据需要还可以自定义多个按钮及事

  • 微信小程序实现自定义picker选择器弹窗内容

    微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容. 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: wxml <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindtap="toggleDialo

  • 微信小程序实现蒙版弹窗效果

    本文实例为大家分享了微信小程序实现蒙版弹窗效果的具体代码,供大家参考,具体内容如下 <view class="modalDlg" wx:if="{{showModal}}"> <view class='close_mask' bindtap="close_mask">X</view> <input class='recharge_amount' type='text' placeholder='充值金额'

  • 微信小程序表单弹窗实例

    开发中有时候会碰到需要一个表单弹窗来处理数据的提交处理,然后这次发布的这套源码就是解决这个问题! WXML代码如何: <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">button</view> <!--mask--> <view class="drawer_screen" bin

随机推荐