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


Posted in Javascript onNovember 27, 2018

前言

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

效果图

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

Step1:初始化组件

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

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

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

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

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 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
Vue filters过滤器的使用方法
Jul 14 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 #Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 #Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
js replace替换字符串同时替换多个方法
Nov 27 #Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 #Javascript
使用electron制作满屏心特效的示例代码
Nov 27 #Javascript
30分钟快速实现小程序语音识别功能
Nov 27 #Javascript
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
javascript 对象的定义方法
2007/01/10 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python实现简单登陆系统
2018/10/18 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
python实现斗地主分牌洗牌
2020/06/22 Python
virtualenv介绍及简明教程
2020/06/23 Python
Python 在局部变量域中执行代码
2020/08/07 Python
css3 transform属性详解
2014/09/30 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
C#笔试题
2015/07/14 面试题
五水共治一句话承诺
2014/05/30 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
离婚协议书格式
2015/01/26 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书