自定義小程序中的模態框

1.在pages文件夾下新建一個文件modal文件

2.在list.wxml文件中,將想要彈出來的模態框內容,使用標籤寫好

<template name="addtell">
  <view>
    <modal title="" confirm-text="確認" cancel-text="取消" hidden="{{addtellHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">
      <label>
        <view class="tellsection">
          <view  class="tellinput">{{contract_info}}</view>
          <view  class="isGo">是否繼續</view>
        </view>
      </label>
    </modal>
   </view>
 </template>

3.在要使用模態框的頁面使用import進行引入,並且在要引入的js頁面定義在modal頁面中要使用的數據

addtellHidden  表示當前模態框的顯示隱藏

bindconfirm="modalConfirm"   當用戶點擊確認按鈕時,會調用modalConfirm方法,這個方法是需要自己在相應的js頁面進行定義的

bindcancel="modalCancel"   當用戶點擊取消按鈕,會調用modalCancel方法,執行取消之後的相關邏輯,同時這個方法也是需要在相應的js文件中進行定義

contract_info  表示模態框想要顯示的數據

4.當前頁面的css樣式

 .tellinput {
        /* border: 1px solid #efeff4; */
        font-size: 19px;
    }
    .tellsection view {
        color: #000;
        width: 100%;
        
    }
    .isGo{
        text-align: center;
        font-size: 19px;
    }

結束,有什麼更好的方法,希望大佬們能夠提出來,

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章