微信小程序自定义toast的实现代码


Posted in Javascript onNovember 16, 2018

今天写微信小程序突然发现一个尴尬的问题,请求报错需要提示,就去小程序API里找,可悲的小程序的toast并不能满足我的需求,原生提供的方法调用如下

wx.showToast({
  title: '成功',
  icon: 'succes',
  duration: 1000,
  mask:true
})

下面是官方API的说明

可以看到支持的图标只有两种,连基本的warning和error都没有,最可悲的是title最多只支持7个汉字的长度,完全不能忍啊,现在哪个框架里还没有个正儿八经提示框的组件,想想还是自己写一个算了,下面是效果图

下面来说下小程序实现自定义公共组件的方法,以自定义toast为例

1、新建toast组件

在toast.json里修改如下,设置为组件

{
 "component": true
}

toast.wxml

<view class='wx-toast-box' animation="{{animationData}}">
 <view class='wx-toast-content'>
  <view class='wx-toast-toast'>{{ content }}</view>
 </view>
</view>

定义样式,toast.wxss,这里使用flex布局,代码很简单,也没什么好说的,直接贴上

.wx-toast-box{
 display: flex;
 width: 100%;
 justify-content: center;
 position: fixed;
 z-index: 999;
 bottom:80rpx;
 opacity: 0;
}
.wx-toast-content{
 max-width: 80%;
 border-radius:30rpx;
 padding: 30rpx;
 background: rgba(0, 0, 0, 0.6);
}
.wx-toast-toast{
 height: 100%;
 width: 100%;
 color: #fff;
 font-size: 28rpx;
 text-align: center;
}

toast.js

Component({
 options: {
  multipleSlots: true // 在组件定义时的选项中启用多slot支持 
 },
 /** 
  * 私有数据,组件的初始数据 
  * 可用于模版渲染 
  */
 data: { // 弹窗显示控制 
  animationData: {},
  content: '提示内容'
 },
 /**
  * 组件的方法列表 
  */
 methods: {
  /** 
   * 显示toast,定义动画
   */
  showToast(val) {
   var animation = wx.createAnimation({
    duration: 300,
    timingFunction: 'ease',
   })
   this.animation = animation
   animation.opacity(1).step()
   this.setData({
    animationData: animation.export(),
    content: val
   })
   /**
    * 延时消失
    */
   setTimeout(function () {
    animation.opacity(0).step()
    this.setData({
     animationData: animation.export()
    })
   }.bind(this), 1500)
  }
 }
})

2、在父级组件中调用公共组件,以login页面为例

在login.json中注册组件

{
 "navigationBarTitleText": "登录注册",
 "usingComponents":{
  "toast": "../common/toast/toast"
 }
}

login.wxml中调用组件

<view>
 <toast id='toast'>
 </toast>
</view>

login.js里点击登陆录的时候调用显示showDialog方法

onReady: function () {
  this.toast = this.selectComponent("#toast");
},
listenerLogin: function() {
  this.dialog.showToast('恭喜你,获得了toast');
},

总结

以上所述是小编给大家介绍的微信小程序自定义toast的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 自定义个性下拉选择框示例
Aug 20 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
javascript中this关键字详解
Dec 12 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
js轮播图无缝滚动效果
Jun 17 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
node内置调试方法总结
Feb 22 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
vue实现简单的星级评分组件源码
Nov 16 #Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 #Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 #Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 #Javascript
layDate插件设置开始和结束时间
Nov 15 #Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 #Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 #Javascript
You might like
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
python操作mysql代码总结
2018/06/01 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Python Django基础二之URL路由系统
2019/07/18 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
简单的个人租房协议书范本
2014/11/26 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android