找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发之自定义dialog组件开发教程,附源码下载

[复制链接]
查看: 589|回复: 1
最佳答案
0 

6

主题

6

帖子

90

积分

新人求带

积分
90
 楼主| 发表于 2018-4-16 17:02:46 | 显示全部楼层 |阅读模式
微信小程序开发之自定义dialog组件开发教程,附源码下载

由于项目开发需求,坑爹的小程序没有自定义dialog(类似饿了么组件那种)。于是百度了下思路,开发了一个。
参数:
  • title  标题
  • cancelText  取消文本 (默认文本为取消)
  • confirmText  确认文本(默认文本为确定)
  • animated  是否动画 (默认为是)
  • modalSize  模态框大小(默认md)
  • animationOption  动画事件(默认300s)

接下来分享下实现步骤吧...主要的概念就是想把自定义的部分通过<slot>插槽来接收。

创建好components组件且命好名字。 小tips:在微信开发工具内创建方便点它会自动帮你把相关文件配好。
4309138-40fe80f9262ed467.png

写好相关布局及样式。
dialog.wxss
  1. /** 模态 **/
  2. .modal{
  3.     position: fixed;
  4.     top: 0rpx;
  5.     left: 0rpx;
  6.     right: 0rpx;
  7.     bottom: 0rpx;
  8.     width: 100%;
  9.     height: 100%;
  10.     z-index: 100;
  11.   }
  12.   
  13.   .modal-mask{
  14.     position: absolute;
  15.     width: 100%;
  16.     height: 100%;
  17.     z-index: 97;
  18.     background-color: rgba(0,0,0,0.30);
  19.   }
  20.   
  21.   
  22.   .modal-layer-sm{
  23.      width: 60%;
  24.      transform : translate3d(-50%,-50%,0);
  25.      left : 50%;  
  26.   }
  27.   
  28.   .modal-layer-md{
  29.      width: 80%;
  30.      transform : translate3d(-50%,-50%,0);
  31.      left : 50%;   
  32.   }
  33.   
  34.   .modal-layer-full{
  35.      width: 100%;
  36.      left: 0;  
  37.   }
  38.   
  39.   
  40.   .modal-layer{
  41.     position: absolute;
  42.     background: transparent;
  43.     top: 50%;   
  44.     display: flex;
  45.     flex-direction: column;
  46.     z-index: 98;   
  47.     box-shadow: 0 4rpx 14rpx rgba(0,0,0,.4);
  48.   }
  49.   
  50.   .modal-header{
  51.     background: #fff;
  52.     color:  #333;
  53.     padding: 20rpx;
  54.     font-size: 30rpx;
  55.     text-align: center;
  56.     border-top-left-radius: 10rpx;
  57.     border-top-right-radius: 10rpx;  
  58. }

  59.   .modal-body{
  60.     flex:  1;  
  61.     padding: 0 40px 40rpx;
  62.     background: #ffffff;  
  63.   }

  64.   

  65. .modal-footer{
  66.     background: #ffffff;
  67.     flex-direction: row;
  68.     display: flex;
  69.     align-items: center;
  70.     width: 100%;  
  71.     border-top : 1rpx solid #eee;   
  72.     border-bottom-left-radius: 10rpx;
  73.     border-bottom-right-radius: 10rpx;  
  74. }

  75. .modal-close{
  76.     color: #fff;
  77.     font-size: 48rpx;
  78.     position: absolute;
  79.     right: 40rpx;
  80.     top: 0;
  81.     z-index: 98;
  82. }


  83. .btn{
  84.   flex: 1;
  85.   text-align: center;   
  86.   font-size: 30rpx;
  87.   color:#666;
  88.   padding:  19rpx 5rpx;
  89. }
  90. .btn:first-child{
  91.     border-right: 1px solid #eee;
  92. }
  93. .btn-primary{
  94.   color: #009887;   
  95. }
复制代码

dialog.wxml
  1. <view  animation="{{animationData}}"  hidden="{{!isShow}}"  class='modal'>
  2.    
  3.     <view  data-type="mask"  catchtap='hideModal' class='modal-mask' ></view>

  4.     <view  class='modal-layer  modal-layer-radius {{modalSize == "sm" ? " modal-layer-sm" : " modal-layer-md" }} ' >

  5.          <!-- 头部 -->
  6.         <view class='modal-header'>        
  7.             <text>{{title}}</text>        
  8.         </view>

  9.         <!-- 内容区域 -->
  10.         <view class='modal-body'>         
  11.             <slot></slot>                          
  12.         </view>
  13.         <view class='modal-footer'>
  14.             <text catchtap='_cancelModal' class='btn btn-default'>{{cancelText}}</text>
  15.             <text catchtap='_confirmModal'  class='btn btn-primary'>{{confirmText}}</text>                        
  16.         </view>
  17.     </view>
  18. </view>
复制代码

dialog.js
  1. // common/component/modal.js
  2. Component({   
  3.   
  4.     /**
  5.      * 组件的属性列表
  6.      */
  7.     properties: {
  8.       title : {
  9.         type : String,
  10.         value : '这里是默认标题'
  11.       },
  12.       
  13.       cancelText : {
  14.         type: String,
  15.         value: '取消'
  16.       },
  17.   
  18.       confirmText : {
  19.         type: String,
  20.         value: '确定'
  21.       },
  22.       
  23.       backdrop: {
  24.         type: Boolean,
  25.         value: true
  26.       },
  27.       
  28.       animated : {
  29.         type: Boolean,
  30.         value: true
  31.       },

  32.       //模态框大小(sm md)
  33.       modalSize : {
  34.         type: String,
  35.         value: "md"
  36.       },

  37.       //动画时间(默认300)
  38.       animationOption : {
  39.         type : Object,
  40.         value  : {
  41.           duration : 300
  42.         }
  43.       },

  44.      
  45.     },
  46.   
  47.     /**
  48.      * 组件的初始数据
  49.      */
  50.     data: {
  51.       isShow:false,
  52.       animation : ''
  53.     },
  54.    
  55.   
  56.     ready: function () {   
  57.        this.animation = wx.createAnimation({
  58.           duration: this.data.animationOption.duration,
  59.           timingFunction: "linear",
  60.           delay: 0
  61.       });
  62.     },
  63.   
  64.     /**
  65.      * 组件的方法列表
  66.      */
  67.     methods: {
  68.       //modal隐藏
  69.       hideModal : function(e){  
  70.         if(e){
  71.           let type = e.currentTarget.dataset.type;
  72.           if (type == 'mask' && !this.data.backdrop) {
  73.             return;
  74.           }   
  75.         }               
  76.         if (this.data.isShow) this._toggleModal();
  77.       },
  78.       
  79.       //modal显示
  80.       showModal: function(){
  81.         if (!this.data.isShow) {
  82.           this._toggleModal();         
  83.         }
  84.       },

  85.       //切换modal的显示还是隐藏
  86.       _toggleModal:function(){      
  87.         if(!this.data.animated){
  88.             this.setData({
  89.               isShow: !this.data.isShow
  90.             })
  91.         }
  92.         else{
  93.           let isShow = !this.data.isShow;
  94.           this._executeAnimation(isShow);
  95.         }

  96.         
  97.       },
  98.       
  99.       //根据需求执行动画
  100.       _executeAnimation: function (isShow) {
  101.         
  102.           let animation = this.animation;
  103.           if (isShow) {
  104.   
  105.             animation.opacity(0).step();
  106.   
  107.             this.setData({
  108.               animationData: animation.export(),
  109.               isShow: true
  110.             })
  111.   
  112.             setTimeout(function () {
  113.               animation.opacity(1).step()
  114.               this.setData({
  115.                 animationData: animation.export()
  116.               })
  117.             }.bind(this), 50)
  118.           }
  119.           else {
  120.             animation.opacity(0).step()
  121.             this.setData({
  122.               animationData: animation.export()
  123.             })
  124.   
  125.             setTimeout(function () {
  126.               this.setData({
  127.                 isShow: isShow
  128.               })
  129.             }.bind(this), this.data.animationOption.duration)
  130.   
  131.           }
  132.   
  133.   
  134.         },
  135.         //取消事件 向外部page 发送事件通知
  136.         _cancelModal : function(){      
  137.           this.hideModal();     
  138.           this.triggerEvent("cancelEvent");
  139.         },

  140.         //确认事件
  141.         _confirmModal : function(){     
  142.           this.triggerEvent("confirmEvent");
  143.         }

  144.     }
  145.   })
复制代码

核心都在这叻~注释都有哦。
分析下怎么做到自定义弹层吧。
4309138-dc002412f90e691b.png

通过slot图所示,从图中可以知道通过slot插槽来接受modal-body里头自定义的代码。因为这里只需要一个插槽,所以插槽的名字可以省略,会自动配上。如果是需要多个slot的话,记得为插槽加上name="xxx"属性命名哦,对应的视图块通过 slot="xxx"接受对应的插槽数据。

引用组件须知

js部分
需用在页面渲染的时候获取组件
  1.   onReady: function () {
  2.     this.Modal = this.selectComponent("#modal");
  3.   },
复制代码

取消按钮以及确定按钮的回调事件
  1. _cancelEvent : function(){
  2.     console.log("点击取消!");
  3.   }

  4. _confirmEventFirst : function(){
  5.     console.log("点击确定了!");  
  6.     this.Modal.hideModal();
  7.   }
复制代码

控制modal显示和隐藏
  1. this.Modal.showModal();//显示
  2. this.Modal.hideModal(); //隐藏
复制代码

好了展示下效果呗~
4309138-e7586a3ca91bb191.png

对了。标题这块以及按钮块都可以根据自己的需求再做调整哦。
样式也可以调整。
游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

最佳答案
0 

4

主题

26

帖子

367

积分

新人求带

积分
367
发表于 2018-5-14 17:17:30 | 显示全部楼层
好东西,可以下载吗
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com