今天写微信小程序突然发现一个尴尬的问题,请求报错需要提示,就去小程序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的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]