微信小程序中自定義modal彈窗組件的示例分析

這篇文章主要介紹了微信小程序中自定義modal彈窗組件的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

先來一張圖。

看到這里了，說明效果圖還是對你有點吸引的么，哈哈，廢話不多說了，開始上代碼。。。

一共是四個文件js、json、xml，wxss，如果這個都還不清楚的童鞋請出門左拐，面壁思過5分鐘。

先上布局dialog.xml文件

<!--mask dialog-->
<view class="drawer_screen" bindtap="hideDialog" wx:if="{{isShow}}" catchtouchmove="myCatchTouch"></view>
<!--content-->
<!--使用animation屬性指定需要執行的動畫-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{isShow}}">

  <!--drawer content-->
  <view class='row'>
    <view class="drawer_title" style='width:100%;padding-left:60rpx'>{{title}}</view>
    <icon type="clear" style='margin-top:40rpx;margin-right:20rpx;' bindtap="hideDialog"></icon>
  </view>
  <form bindsubmit="_formSubmit">
    <scroll-view scroll-y>
      <view class="drawer_content">
        <view wx:for="{{dataObject}}" wx:key="{{id}}">
          <view class="top grid">
            <label class="title col-0" style="color:red" wx:if="{{item.must}}">*</label>
            <label class="title col-0" wx:else> </label>
            <input class="input_base input_h40 col-1" placeholder='{{item.placeholder}}' wx:if="{{item.type === type_input}}" name="{{item.id}}" value="{{bean[item.id]}}"></input>
            <view class="input_base input_h40 col-1" wx:elif="{{item.id === id_sex}}" hover-class='btn_ok_hover' bindtap='{{item.event}}'>{{sexDefault}}</view>
            <view class="input_base input_h40 col-1" wx:elif="{{item.id === id_group}}" hover-class='btn_ok_hover' bindtap='{{item.event}}'>{{groupDefault}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <button class="btn_ok" hover-class='btn_ok_hover' formType="submit">確定</button>
  </form>
</view>

然后是dialog.wxss文件

/*mask dialog start*/
.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}

/*content*/

.drawer_box {
  width: 650rpx;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1001;
  background: #fafafa;
  margin: -480rpx 50rpx 0 50rpx;
  border-radius: 6px;
}

.drawer_title {
  padding: 15px;
  font: 20px "microsoft yahei";
  text-align: center;
}

.drawer_content {
  height: 720rpx;
  /*overflow-y: scroll; 超出父盒子高度可滾動*/
}

.btn_ok {
  padding: 10px;
  font: 20px "microsoft yahei";
  text-align: center;
  border-top: 1rpx solid #e8e8ea;
  color: #3cc51f;
}

.btn_ok_hover {
  color: #aaa;
  background: #d9d9d9;
}

.top {
  padding-top: 8px;
}

.input_base {
  border: 2rpx solid #ccc;
  border-radius: 20rpx;
  padding-left: 20rpx;
  margin-right: 20rpx;
}

.input_h40 {
  height: 30px;
  line-height: 30px;
}

.title {
  height: 30px;
  line-height: 30px;
  width: 40rpx;
  text-align: center;
  display: inline-block;
  font: 300 28rpx/30px "microsoft yahei";
}

.grid {
  display: -webkit-box;
  display: box;
}

.col-0 {
  -webkit-box-flex: 0;
  box-flex: 0;
}

.col-1 {
  -webkit-box-flex: 1;
  box-flex: 1;
}

/*mask dialog end*/

.row {
  display: flex;
  flex-direction: row;
}

再然后就是dialog.js文件

// components/Dialog/dialog.js
Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多slot支持
  },
  /**
   * 組件的屬性列表
   */
  properties: {
    title: { // 屬性名
      type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: '標題' // 屬性初始值（可選），如果未指定則會根據類型選擇一個
    }

  },

  /**
   * 組件的初始數據
   */
  data: {
    // 彈窗顯示控制
    isShow: false,
    type_input: "input",
    type_btn: "button",
    id_sex: "sex",
    id_group: "group",
    dataObject: [],
    sexDefault: "男",
    groupDefault: "組織",
    sexArray: ['男', '女'],
    groupArray: ['組織', '群眾'],
    bean: {},
  },

  /**
   * 組件的方法列表
   */
  methods: {
    /*
     * 公有方法
     */
    setDataObj(dataObj,beanObj) {
      this.setData({
        dataObject: dataObj,
        bean: beanObj
      })
      if (beanObj.hasOwnProperty("sex") && beanObj.sex != ""){
        this.setData({
          sexDefault: beanObj.sex
        })
      }
      if (beanObj.hasOwnProperty("group") && beanObj.group != "") {
        this.setData({
          groupDefault: beanObj.group
        })
      }
    },
    //隱藏彈框
    hideDialog() {
      this._showOrCloseDialog("close")
    },
    //展示彈框
    showDialog() {
      this._showOrCloseDialog("open")
    },
    /*
     * 內部私有方法建議以下劃線開頭
     * triggerEvent 用于觸發事件
     */

    _formSubmit(e) {
      if ("" === e.detail.value.name) {
        wx.showToast({
          title: '請填寫姓名',
          icon: 'none'
        })
        return
      }
      if ("" === e.detail.value.phone) {
        wx.showToast({
          title: '請填寫電話',
          icon: 'none'
        })
        return
      }
      this._showOrCloseDialog("close")
      //觸發成功回調
      this.triggerEvent("confirmEvent", {
        e: e
      });
    },

    sexButton: function() {
      var that = this;
      wx.showActionSheet({
        itemList: this.data.sexArray,
        success: function(res) {
          console.log(res.tapIndex)
          that.setData({
            sexDefault: that.data.sexArray[res.tapIndex]
          })
        },
        fail: function(res) {
          console.log(res.errMsg)
        }
      })
    },
    groupButton: function() {
      var that = this;
      wx.showActionSheet({
        itemList: this.data.groupArray,
        success: function(res) {
          console.log(res.tapIndex)
          that.setData({
            groupDefault: that.data.groupArray[res.tapIndex]
          })
        },
        fail: function(res) {
          console.log(res.errMsg)
        }
      })
    },
    _showOrCloseDialog: function(currentStatu) {
      var that = this;
      /* 動畫部分 */
      // 第1步：創建動畫實例 
      var animation = wx.createAnimation({
        duration: 200, //動畫時長
        timingFunction: "linear", //線性
        delay: 0 //0則不延遲
      });

      // 第2步：這個動畫實例賦給當前的動畫實例
      this.animation = animation;

      // 第3步：執行第一組動畫
      animation.opacity(0).rotateX(-100).step();

      // 第4步：導出動畫對象賦給數據對象儲存
      that.setData({
        animationData: animation.export()
      })

      // 第5步：設置定時器到指定時候后，執行第二組動畫
      setTimeout(function() {
        // 執行第二組動畫
        animation.opacity(1).rotateX(0).step();
        // 給數據對象儲存的第一組動畫，更替為執行完第二組動畫的動畫對象
        that.setData({
          animationData: animation
        })

        //關閉
        if (currentStatu == "close") {
          that.setData({
            isShow: false
          });
        }
      }.bind(this), 200)

      // 顯示
      if (currentStatu == "open") {
        that.setData({
          isShow: true
        });
      }
    }
  },
  //解決滾動穿透問題
  myCatchTouch: function () {
    return
  }
})

看到這里可能有些小伙伴就問了，你個水貨，怎么js文件結構怎么跟我的不一樣，是不是來忽悠我們的？客官別急么，請聽我娓娓道來：其實這里為了方便調用，我把這個dialog封裝成了一個組件了。你問我怎么封裝組件？請移步官方教程：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

封裝完成之后項目結構如下：

這里誤會就解釋清楚了，麻煩給個面子繼續往下看。。

已經展示了三大金剛了，還有一個dialog.json文件未展示，這個文件很簡單

{
  "component": true,//作為組件
  "usingComponents": {}//引用別的組件
}

這個文件也和一般json文件有差異，主要是配置了作為組件讓別人引用的，所以到這個，這個組件已經封裝完成了

可能這個時候很多童鞋迫不及待的復制粘貼然后把代碼放入項目中想一睹真容，發現運行結果跟效果圖不一樣，然后有一部分人可能又要說：娘希匹，果然是個水貨，騙人的！！！到這里，我只能說：各位鄉親們，蛋定、蛋定。。。，因為到js中的dataObject和bean沒有么，所以效果圖跟我在文章開始展示的不一樣。so，下面就告訴大家，怎么調用，并且實現和我一樣的效果。

在引用的xml中添加如下代碼

<image src="../../img/add.png" class="buttom" bindtap="bindAdd"></image>

<dialog id='dialog' title='新增' bind:confirmEvent="_confirmEvent"></dialog>

buttom這個是個懸浮按鈕，wxss也給你

.buttom{
  width: 100rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom:60rpx;
  right: 60rpx;
}

然后引用頁面的js文件中

onReady: function() {
    //獲得dialog組件
    this.dialog = this.selectComponent("#dialog");
}



//響應button彈框
bindAdd: function(e) {
    this.dialog.setDataObj(addObject, {})
    this.dialog.showDialog();
}

到這里基本上點擊懸浮按鈕就可以實現彈框了。有的大胸dei又要說了：哎哎哎，等等，addObject,和那個add.png還沒有給了。好吧，給給給，都給你們

const addObject = [{
  id: "name",
  must: true,
  placeholder: "姓名",
  type: "input",
  event: "nameInput"
},
{
  id: "sex",
  must: true,
  placeholder: "男",
  type: "button",
  event: "sexButton"
},
{
  id: "group",
  must: true,
  placeholder: "組織",
  type: "button",
  event: "groupButton"
},
{
  id: "phone",
  must: true,
  placeholder: "電話號碼",
  type: "input",
  event: "phoneInput"
},
{
  id: "shortNum",
  must: false,
  placeholder: "集團短號",
  type: "input",
  event: "shortNumInput"
},
{
  id: "mail",
  must: false,
  placeholder: "電子郵箱",
  type: "input",
  event: "mailInput"
},
{
  id: "unit",
  must: false,
  placeholder: "單位名稱",
  type: "input",
  event: "unitInput"
},
{
  id: "department",
  must: false,
  placeholder: "部門名稱",
  type: "input",
  event: "departmentInput"
},
{
  id: "job",
  must: false,
  placeholder: "職務",
  type: "input",
  event: "jobInput"
},
{
  id: "function",
  must: false,
  placeholder: "涉及工作內容",
  type: "input",
  event: "functionInput"
},
{
  id: "comPhone",
  must: false,
  placeholder: "辦公電話",
  type: "input",
  event: "comPhoneInput"
},
{
  id: "fax",
  must: false,
  placeholder: "傳真",
  type: "input",
  event: "faxInput"
},
{
  id: "homePhone",
  must: false,
  placeholder: "家庭電話",
  type: "input",
  event: "homePhoneInput"
},
{
  id: "showOrder",
  must: false,
  placeholder: "顯示順序",
  type: "input",
  event: "showOrderInput"
},
{
  id: "departOrder",
  must: false,
  placeholder: "部門順序",
  type: "input",
  event: "departOrderInput"
},
{
  id: "remark",
  must: false,
  placeholder: "備注",
  type: "input",
  event: "remarkInput"
}
]

圖片

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序中自定義modal彈窗組件的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!