微信小程序自定义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获取服务器时间的两个简单方法
Jan 08 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
javascript内置对象操作详解
Feb 04 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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文件下载类
2006/12/06 PHP
PHP has encountered an Access Violation
2007/01/15 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
理解javascript异步编程
2016/01/27 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
JS实现购物车特效
2017/02/02 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
详解python中index()、find()方法
2019/08/29 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
Linux上比较文件的命令都有哪些
2012/02/24 面试题
点菜员岗位职责范本
2014/02/14 职场文书
教师考核评语大全
2014/12/31 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书