微信小程序自定义多功能模态对话框案例实战

   这段时间刚好在做微信小程序相关项目开发，发现微信官方提供的小程序弹窗功能有限， 有些功能根本没法实现，这篇文章主要介绍微信小程序项目实战之自定义模态对话框wxDialog，处理一些复杂的弹窗逻辑业务，采用了仿原生、wxui写法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下哈~~~

先来个demo预览页面：

api配置参数如下：

var config = {
  type: '',           //设置弹窗显示类型 ->默认：0 （0表示信息框，1表示页面层）
  title: '',          //标题
  content: '',        //内容
  style: '',          //自定弹窗样式
  skin: '',           //自定弹窗显示风格 ->目前支持配置 toast(仿微信toast风格) footer(底部对话框风格)、msg(普通提示)
  icon: '',           //弹窗小图标(success | loading)

  shade: true,        //是否显示遮罩层
  shadeClose: true,   //是否点击遮罩时关闭层
  anim: 'scaleIn',    //scaleIn：缩放打开(默认)  fadeIn：渐变打开  fadeInUpBig：由上向下打开 fadeInDownBig：由下向上打开  rollIn：左侧翻转打开  shake：震动  footer：底部向上弹出
  time: 0,            //设置弹窗自动关闭秒数

  btns: null          //不设置则不显示按钮。如果只需要一个按钮，则btn: '按钮'，如果有两个，则：btn: ['按钮一', '按钮二']
};

        

          
        
        
        

          

          AI 代码解读
        
      
      

<template name="dialog">
  <block>
    <view class="popui__modal-panel" wx:if="{{showModalStatus}}">
      <view wx:if="{{shade}}" class="popui__modal-mask" data-shadeClose="{{shadeClose}}" catchtap="hideModal"></view>
      <view class="popui__panel-main">
        <view class="popui__panel-section">
          <view class="popui__panel-child anim-{{anim}} {{skin ? 'popui__' + skin : ''}}" style="{{style}}">
            <!-- //标题区 -->
            <view class="popui__panel-tit" wx:if="{{title}}">{{title}}</view>
            <!-- //内容区 -->
            <view class="popui__panel-cnt">
              <view wx:if="{{skin == 'toast' && icon}}" class="popui__toast-icon"><icon type="{{icon}}" size="30" color="#fff" /></view>
              {{content}}
            </view>
            <!-- //按钮区 -->
            <block wx:if="{{btns}}">
              <view class="popui__panel-btnwrap">
                <view class="popui__panel-btn">
                <block wx:for="{{btns}}">
                  <text class="btn" bindtap="btnTapped" data-index="{{index}}" style="{{item.style}}">{{item.text}}</text>
                </block>
                </view>
              </view>
            </block>
          </view>
        </view>
      </view>
    </view>
  </block>
</template>

        

          
        
        
        

          

          AI 代码解读
        
      
      

===主张原创开发，拒绝数量、追求质量！
===建立营销型网站，全新清新风格，协助每个用户更加高效的工作。
===追求完美是我们一贯的信念。我们重视每一个细节，每个作品都细心雕琢，精确到像素级。

——>>> QQ：282310962    微信：xy190310