微信小程序使用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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
js实现简单模态窗口,背景灰显
Nov 14 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 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中替换换行符的几种方法小结
2012/10/15 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
PHP 正则表达式小结
2015/02/12 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
理解JS事件循环
2016/01/07 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Python删除空文件和空文件夹的方法
2015/07/14 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python语言描述最大连续子序列和
2017/12/05 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
毕业生自我鉴定
2013/11/05 职场文书
教师职称自我鉴定
2014/02/12 职场文书
抽奖活动主持词
2014/03/31 职场文书
初中英语课后反思
2014/04/25 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers