微信小程序自定义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模拟多线程
Feb 07 Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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二分法在IP地址查询中的应用
2008/08/12 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
js 分栏效果实现代码
2009/08/29 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
超市采购员岗位职责
2014/02/01 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
大学生求职信例文
2014/06/29 职场文书
体育课外活动总结
2014/07/08 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python
如何利用python创作字符画
2022/06/25 Python