如何在微信小程序中自定義toast組件？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供吉木薩爾網(wǎng)站建設(shè)、吉木薩爾做網(wǎng)站、吉木薩爾網(wǎng)站設(shè)計(jì)、吉木薩爾網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、吉木薩爾企業(yè)網(wǎng)站模板建站服務(wù)，10余年吉木薩爾做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

wxml

<!-- components/toast/toast.wxml -->
<view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}">
  <view class="toast-content" >
    <view class="toast-img">
      <block wx:if="{{type==='success'}}">
        <image class="toast-icon" src="xxx" />
      </block>
      <block wx:if="{{type==='fail'}}">
        <image class="toast-icon" src="xxx" />
      </block>
    </view>
    <view class="toast-title">{{title}}</view>
  </view>
</view>

js

// components/toast/toast.js
Component({
 properties: {
 },
 data: {
  type: 'fail',
  title: '你還沒(méi)有勾選呢！',
  isShow: false,
  animationData: ''
 },
 methods: {
  showToast: function (data) {
   const self = this;
   if (this._showTimer) {
    clearTimeout(this._showTimer)
   }
   if (this._animationTimer) {
    clearTimeout(this._animationTimer)
   }
   // display需要先設(shè)置為block之后，才能執(zhí)行動(dòng)畫
   this.setData({
    title: data.title,
    type: data.type,
    isShow: true,
   });
   this._animationTimer = setTimeout(() => {
    const animation = wx.createAnimation({
     duration: 500,
     timingFunction: 'ease',
     delay: 0
    })
    animation.opacity(1).step();
    self.setData({
     animationData: animation.export(),
    })
   }, 50)
   this._showTimer = setTimeout(function () {
    self.hideToast();
    if (data.compelete && (typeof data.compelete === 'function')) {
     data.compelete()
    }
   }, 1200 || (50 + data.duration))
  },
  hideToast: function () {
   if (this._hideTimer) {
    clearTimeout(this._hideTimer)
   }
   let animation = wx.createAnimation({
    duration: 200,
    timingFunction: 'ease',
    delay: 0
   })
   animation.opacity(0).step();
   this.setData({
    animationData: animation.export(),
   })
   this._hideTimer = setTimeout(() => {
    this.setData({
     isShow: false,
    })
   }, 250)
  }
 }
})

json

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

wxss

/* components/toast/toast.wxss */
.toast-box {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: 11;
 display: none;
 opacity: 0;
}
.show{
 display: block;
}
.toast-content {
 position: absolute;
 left: 50%;
 top: 35%;
 width: 350rpx;
 /*height: 250rpx;*/
 border-radius: 10rpx;
 box-sizing: bordre-box;
 transform: translate(-50%, -50%);
 background: rgba(0, 0, 0, .7);
}
.toast-img{
  width: 100%;
  height: 120rpx;
  padding-top: 15rpx;
  box-sizing: bordre-box;
  text-align: center;
}
.toast-icon{
  width: 100rpx;
  height: 100rpx;
}
.toast-title {
  width: 100%;
  padding:10rpx;
  line-height: 65rpx;
  color: white;
  text-align: center;
  font-size: 40rpx;
  box-sizing: border-box;
}

使用

例如，在index.html中使用

在json中添加useComponents屬性

"usingComponents": {
  "vas-prompt": "./components/toast/toast"
}

wxml

<vas-toast id='toast'></vas-toast>
<button bindtap="showToast">點(diǎn)擊彈出toast</button>

js

//在onReady生命周期函數(shù)中，先獲取prompt實(shí)例
onReady:function(){
  this.prompt = this.selectComponent("#toast");
},
showToast:function(){
  this.toast.showToast({
   type: 'success',
   title: '測(cè)試彈出消息',
   duration: 1000,
   compelete: function () {
    console.log('toast框隱藏之后，會(huì)調(diào)用該函數(shù)')
    //例如：跳轉(zhuǎn)頁(yè)面wx.navigateTo({ url: 'xxx' });
   }
  })
},

效果

看完上述內(nèi)容，你們掌握如何在微信小程序中自定義toast組件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：如何在微信小程序中自定義toast組件
分享地址：http://www.js-pz168.com/article37/jhgosj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、用戶體驗(yàn)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)