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

 更新时间:2018年11月27日 11:38:14   投稿:lijiao   我要评论
这篇文章主要介绍了微信小程序使用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组件的步骤。

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

相关文章

  • JavaScript监测ActiveX控件是否已经安装过的代码

    JavaScript监测ActiveX控件是否已经安装过的代码

    这是通用的方法,只需要把唯一的Activex的clsid和任意一个属性或方法名传进来就可以判断了。(找了两个小时才找到 -_-!)
    2008-09-09
  • 轻量级的原生js日历插件calendar.js使用指南

    轻量级的原生js日历插件calendar.js使用指南

    网页上的原生js日历代码,鼠标点击文字提示处,会显示一个带年月日的日历窗口,可调整年份、月份、选择日期等,用在网页上方便大家选择日期,提高用户体验。各大浏览器都能正常运行,有需要的小伙伴可以参考下。
    2015-04-04
  • js滚动条多种样式,推荐

    js滚动条多种样式,推荐

    [红色]js滚动条多种样式,推荐...
    2007-02-02
  • JS冒泡事件与事件捕获实例详解

    JS冒泡事件与事件捕获实例详解

    这篇文章主要介绍了JS冒泡事件与事件捕获,结合实例形式分析了javascript冒泡的原理与阻止冒泡的相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • JavaScript数组方法大全(推荐)

    JavaScript数组方法大全(推荐)

    本文是小编给大家特意整理的关于js数组方法的知识,非常实用,在面试笔试题中经常用得到,有需要的朋友可以参考下
    2016-07-07
  • JS二分查找算法详解

    JS二分查找算法详解

    这篇文章主要为大家详细介绍了JS二分查找算法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • ES6中Class类的静态方法实例小结

    ES6中Class类的静态方法实例小结

    这篇文章主要介绍了ES6中Class类的静态方法,结合实例形式简单总结分析了ES6中class类中静态方法的使用方法与相关注意事项,需要的朋友可以参考下
    2017-10-10
  • 原生js实现电商侧边导航效果

    原生js实现电商侧边导航效果

    本文主要分享了原生js实现电商侧边导航效果的示例代码以及原理分析。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js中最容易被忽视的事件问题大总结

    js中最容易被忽视的事件问题大总结

    下面小编就为大家带来一篇js中最容易被忽视的事件问题大总结。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-05-05
  • 一个JavaScript函数把URL参数解析成Json对象

    一个JavaScript函数把URL参数解析成Json对象

    一个JavaScript函数parseQueryString,它的用途是把URL参数解析为一个对象,很实用,大家可以看看
    2014-09-09

最新评论