快捷導(dǎo)航

微信小程序使用component自定義toast彈窗效果

更新時(shí)間：2018年11月27日 11:38:13 投稿：lijiao

這篇文章主要介紹了微信小程序使用component自定義toast彈窗效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

微信小程序自帶的消息提示框有字?jǐn)?shù)限制，而且圖標(biāo)僅僅只有"success"，"loading"，"none"。當(dāng)我們?cè)趯?shí)際開發(fā)過程中，面對(duì)UI給的設(shè)計(jì)圖稿和微信小程序默認(rèn)提供的消息提示框具有很大差別的時(shí)候，自然就不能再使用微信小程序的消息提示框，而應(yīng)當(dāng)使用component自定義消息提示框組件。

效果圖

Step1：初始化組件

新建一個(gè)components文件夾，這個(gè)文件夾用來存放我們以后要開發(fā)的所有自定義組件。

然后在components文件夾中創(chuàng)建Toast文件夾，在Toast上右擊新建Component 之后就會(huì)自動(dòng)創(chuàng)建相對(duì)應(yīng)的wxml、wxss、js、json文件。

Step2：組件的相關(guān)配置

將toast.json 中component 設(shè)置為true

toast.json：

{
 "component": true,  // 自定義組件聲明
 "usingComponents": {}  // 可選項(xiàng)，用于引用別的組件
}

然后在toast.wxml文件里寫彈窗組件的模板，在toast.wxss文件里寫組件的樣式

toast.wxml：

<!--components/Toast/toast.wxml-->
<view class='mask' hidden="{{isShow}}">
 <image class="image" src='../../images/{{icon}}.png' mode='aspectFit'></image>
 <view class='info'>{{information}}</view>
</view>

toast.wxss：

/* components/Toast/toast.wxss */
.mask{
 width: 400rpx;
 height: 300rpx;
 border-radius:10rpx; 
 position: fixed;
 z-index: 1000;
 top: 300rpx;
 left: 175rpx;
 background: rgba(0, 0, 0, 0.6);
}
.image{
 z-index: 1000;
 width: 120rpx;
 height: 120rpx;
 margin-left: 140rpx;
}
.info{
 margin-top:50rpx; 
 z-index: 1000;
 text-align: center;
 color: #ffffff;
}
 width: 400rpx;
 height: 300rpx;
 border-radius:10rpx; 
 position: fixed;
 z-index: 1000;
 top: 300rpx;
 left: 175rpx;
 background: rgba(0, 0, 0, 0.6);
}
.image{
 z-index: 1000;
 width: 120rpx;
 height: 120rpx;
 margin-left:80rpx;
}
.info{
 margin-top:50rpx; 
 z-index: 1000;
 text-align: center;
 color: #ffffff;
}

Step3：定義屬性、數(shù)據(jù)和事件

可以看到在toast.wxml文件中出現(xiàn)了{(lán){isShow}}、{{icon}}、{{information}} 變量，這是為了組件模板能夠根據(jù)傳入的屬性動(dòng)態(tài)變化。

toast.js :

// components/Toast/toast.js
Component({
 /**
 * 組件的屬性列表
 */
 properties: {    //定義組件屬性
 information:{   //用來顯示提示信息
  type: String,   // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
  value: '提示信息'  // 屬性初始值（可選），如果未指定則會(huì)根據(jù)類型選擇一個(gè)
 },
 icon:{     //圖標(biāo)類型，我在images文件夾中存放了success和fail的兩個(gè)圖標(biāo)
  type:String,
  value:'success'
 },
 showTime:{    //彈窗開始顯示的時(shí)間單位ms
  type: Number,
  value:1000
 },
 hideTime: {    //彈窗開始隱藏的時(shí)間單位ms
  type: Number,
  value: 1000
 }
 },
 /**
 * 組件的初始數(shù)據(jù)
 */
 data: {
 isShow:true
 },
 /**
 * 組件的方法列表
 */
 methods:{ 
 showToast:function () {
  let that = this;
  setTimeout(function () { 
  that.setData({
   isShow: !that.data.isShow
  });
  }, that.data.showTime);
 },
 hideToast: function (e) {
  let that = this;
  setTimeout(function(){  
  that.setData({
   isShow: !that.data.isShow
  });
  },that.data.hideTime);
 }
 }
})

Step4：使用彈窗/strong>

目前已經(jīng)完成了toast組件模板，接下來就是在需要顯示這個(gè)彈窗的頁面中使用它。

index.json：引入組件

{
 "usingComponents": {
 "toast": "/components/Toast/toast"
 }
}

index.wxml：

<!--page/index/index.wxml-->
<view class="container">
 <toast id='toast'information="提交成功，我們會(huì)盡快和您聯(lián)系" icon="success" showTime="1000" hideTime='2000'></toast>
 <button type="primary" bindtap="show"> 顯示彈窗 </button>
</view>

index.js：

// page/index/index.js
Page({
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {

 },
 show:function(){
 this.toast.showToast();
 this.toast.hideToast();
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {

 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 */
 onReady: function () {
 this.toast = this.selectComponent("#toast");
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
 */
 onShow: function () {

 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
 */
 onHide: function () {

 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
 */
 onUnload: function () {

 },
 /**
 * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
 */
 onPullDownRefresh: function () {

 },
 /**
 * 頁面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function () {

 },
 /**
 * 用戶點(diǎn)擊右上角分享
 */
 onShareAppMessage: function () {

 }
})

至此我們就完成了自定義toast組件的步驟。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: