自定义showToast模态框

最新推荐文章于 2024-05-10 01:30:32 发布

嫣嫣细语

最新推荐文章于 2024-05-10 01:30:32 发布

阅读量161

点赞数

分类专栏：微信小程序 javascript 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/aaa123aaasqw/article/details/130681529

版权

微信小程序同时被 2 个专栏收录

77 篇文章 8 订阅

订阅专栏

javascript

63 篇文章 1 订阅

订阅专栏

1.先创建一个showToast文件夹

2.index.js

// components/showToast/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tips:String,
    flag: {
      type: Boolean,
      value: false,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    timer:null,
  },
  lifetimes:{
    attached(){
      console.log('出现');
      if(this.data.timer){
        return
      }
      this.data.timer=setTimeout(() => {
        this.triggerEvent('closeShowToast')
      }, 1500);
    },
    detached(){
      clearTimeout()
      this.data.timer=null
      console.log('关闭');
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {

  }
})

2.index.wxml

<view class="component-contain {{ flag ? 'not-touch' : '' }}">
  <view class="tips-area">{{tips}}</view>
</view>

3.index.wxss

/* components/showToast/index.wxss */
.component-contain{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999999;
}
.tips-area{
  position: relative;
  top: -50rpx;
  max-width: 400rpx;
  white-space: wrap;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: 'Noto-San';
  border-radius: 20rpx;
  font-size: 24rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  font-family: 'FZZhunYuan-director';
}
.not-touch {
  pointer-events: none;
}

4.index.json

{
  "component": true,
  "usingComponents": {}
}

5.在需要用的页面引用这个组件

<showToast wx:if="{{showTips}}" tips="{{toastTips}}" bindcloseShowToast="closeShowToast"></showToast>

data: {
    showTips: false,
    toastTips: ''
  },

  // 关闭弹窗
  closeShowToast() {
    this.setData({
      showTips: false,
      toastTips: '',
    })
  },