微信小程序自定义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 相关文章推荐
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
JavaScript小技巧整理
Dec 30 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
JavaScript实现更换背景图片
Oct 18 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
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
laravel入门知识点整理
2020/09/15 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python with (as)语句实例详解
2020/02/04 Python
keras实现多种分类网络的方式
2020/06/11 Python
简单的命令查看安装的python版本号
2020/08/28 Python
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
中英文自我评价语句
2013/12/20 职场文书
我的求职计划书
2014/01/10 职场文书
机械个人求职信范文
2014/01/24 职场文书
在校实习生求职信
2014/06/18 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
2016春节慰问信范文
2015/03/25 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python