微信小程序自定义toast代码开发实用组件/插件。
小程序交互仅提供这些API
wx.showToast的效果是这样的,太难看了
现在我们来自己写个toast
一、我们把样式写在app.wxss里,这样每个地方都可以调用到
- /*toast start*/
- .wxapp-toast-mask{
- opacity: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 888;
- }
- .wxapp-toast-content-box {
- display: flex;
- width: 100%;
- height: 100%;
- justify-content: center;
- align-items: center;
- position: fixed;
- z-index: 999;
- }
- .wxapp-toast-content {
- width: 50%;
- padding: 20rpx;
- background: rgba(0, 0, 0, 0.7);
- border-radius: 20rpx;
- }
- .wxapp-toast-content-text {
- height: 100%;
- width: 100%;
- color: #fff;
- font-size: 28rpx;
- text-align: center;
- }
- /*toast end*/
二、JS也是写在在app.js里:
- //自定义Toast
- showToast: function(text,o,count){
- var _this = o;
- count = parseInt(count) ? parseInt(count) : 3000;
- _this.setData({
- toastText:text,
- isShowToast: true,
- });
- setTimeout(function () {
- _this.setData({
- isShowToast: false
- });
- },count);
- },
三、在需要调用的wxml文件中合适的地方加上下面代码:(比如index.wxml,注意:有container要放在里面)
- <view class="container">
- <!--wxapp-toast start-->
- <view class="wxapp-toast-content-box" wx:if="{{isShowToast}}">
- <view class="wxapp-toast-content">
- <view class="wxapp-toast-content-text">
- {{toastText}}
- </view>
- </view>
- </view>
- <!--wxapp-toast end-->
- </view>
(或者说把这段放到footer.wxml里,每个文件用include引用一下)
四、然后在对应的js文件放一条代码:(比如对应的index.js)
app.showToast('我是自定义的Toast',that,2000);
五、效果:
新闻热点
疑难解答