微信小程序自定义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 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
jquery中this的使用说明
Sep 06 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
js查找节点的方法小结
Jan 13 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
js断点调试经验分享
2017/12/08 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
中学生爱国演讲稿
2013/12/31 职场文书
总经理工作职责范文
2014/03/14 职场文书
营销与策划专业求职信
2014/06/20 职场文书
学校献爱心活动总结
2014/07/08 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
我的收音机情缘
2022/04/05 无线电
全新239军机修复记
2022/04/05 无线电