小程序 模态对话框自定义组件(modal)

摘要:
--以下是对自定义组件--˃1.3自定义组件图例2的引用。代码云:https://gitee.com/ajuanK/wxSimpleTodoList.git2.1组件页面设计对话框中的内容:标题、内容和操作按钮。内容使用slot来承担页面中用户定义的节点。该按钮可以用单个按钮显示,并更改其相应的显示内容和颜色。

1. 概述

1.1 说明

小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信息,故做一个自定义组件来处理相关的功能任务。

自定义组件所需功能:

    1. 全屏蒙版
    2. 模态对话框的显示内容:标题、内容、操作按钮
    3. 对模态框的操作,如显示与隐藏,取消按钮是否显示,按钮对应标题颜色等
    4. 模态对话框内容信息能够自定义操作

1.2 自定义组件

  1.2.1 概述

  多个页面中会存在相同功能模块或类似功能模块,此时就可以把这些相同或类似的功能模块抽象成自定义组件,进行减少工作量的开展与后期维护;也可对复杂的页面拆分功能模块处理。

  小程序中的自定义组件也是由 json 、wxml 、wxss 、js 4个文件组成,直接右键点击新建component

    •  json -- json文件中  "component": true (即显示声明自定义组件),则代表这个文件(json&wxml&wxss&js)为自定义组件
    • wxml -- wxml文件中进行编写自定义组件结构,其中组件中可使用<slot>节点去承载组件引用时所提供的子节点信息,即组件中写入<slot></slot>的地方,在页面中引用时可以执行定义节点信息。
    • wxss -- wxss文件中编写组件的样式,使用类选择器进行处理。
    • js -- js文件是定义组件的组件构造器Component({***}),包含组件对外属性properties,组件内部数据data,组件方法methods等

  1.2.2 引用

  使用已注册(json中显示声明component为true)的自定义组件前,需要先在页面的json文件中引用声明,自定义组件的标签名和组件文件路径:

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

  页面中引用:

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name 属性="属性值"></component-tag-name>
</view>

1.3 自定义组件图例

小程序 模态对话框自定义组件(modal)第1张 小程序 模态对话框自定义组件(modal)第2张 

2. 代码

  码云: https://gitee.com/ajuanK/wxSimpleTodoList.git

2.1 组件页面设计(wxml)

  对话框中内容:标题、内容、操作按钮,其中内容使用slot去承接页面中自定义节点,按钮可以单按钮显示并更改其对应显示内容与颜色。

<view class='modal-wrapp' wx:if='{{modal.show}}'>
  <view class='modal-main' style='height:{{(modal.height)?modal.height:modalDefault.height}}'>
    <view class='modal-title'>{{(modal.title)?modal.title:modalDefault.title}}</view>
    <scroll-view scroll-y class='modal-content'>
      <slot></slot>
    </scroll-view>
    <view class='modal-button'>
      <view class='modal-cancel' style='color:{{(modal.cancelColor)?modal.cancelColor:modalDefault.cancelColor}}' wx:if='{{modal.showCancel}}' bindtap="modalCancel">{{(modal.cancelText)?modal.cancelText:modalDefault.cancelText}}</view>
      <view class='modal-confirm' style='color:{{(modal.confirmColor)?modal.confirmColor:modalDefault.confirmColor}}' bindtap="modalConfirm">{{(modal.confirmText)?modal.confirmText:modalDefault.confirmText}}</view>
    </view>
  </view>
</view>

2.2 组件构造器(js)

  使用modal对象去承接弹出框相关配置,modalDefault对象配置默认数据信息,按钮点击事件触发返回事件success

Component({
  /**
   * 组件的属性列表
   *  show: false,//modal是否显示,默认false
      height: '',//modal显示内容高度,默认为50%
      title: '',//modal标题,默认提示
      showCancel: false,//是否显示取消按钮,默认显示
      cancelText: '取消',//取消按钮标题,默认为取消
      cancelColor: '',//取消按钮标题颜色,默认为#000000
      confirmText: '',//确定按钮标题,默认为确定
      confirmColor: '',//确定按钮标题颜色,默认为#3cc51f
      clickClose:true//点击取消或确认按钮后是否关闭modal,默认为true
   */
  properties: {
    modal: {
      type: Object,
      value: {
        show: false,
        height: '',
        title: '',
        showCancel: true,
        cancelText: '取消',
        cancelColor: '',
        confirmText: '',
        confirmColor: '',
        clickClose: true
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    modalDefault: {
      show: false,
      height: '50%',
      title: '提示',
      showCancel: true,
      cancelText: '取消',
      cancelColor: '#000000',
      confirmText: '确定',
      confirmColor: '#3cc51f',
      clickClose: true
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 取消按钮事件
     */
    modalCancel() {
      this.modalShowChange();
      this.triggerEvent('success', {
        res: 'cancel'
      })
    },
    /**
     * 确定按钮事件
     */
    modalConfirm() {
      this.modalShowChange();
      this.triggerEvent('success', {
        res: 'confirm'
      })
    },
    /**
     * 弹框显示属性更改
     */
    modalShowChange: function() {
      let clickClose = this.data.modalDefault.clickClose;
      if (this.data.modal && this.data.modal.clickClose != undefined) {
        if (this.data.modal.clickClose == false) {
          clickClose = false
        }
      }
      if (clickClose) {
        let objModal = {
          show: false
        }
        this.setData({
          modal: objModal
        })
      }
    }
  }
})

2.3 组件配置(json)

{
  "component": true,
  "usingComponents": {}
}

2.4 组件样式(wxss)

.modal-wrapp{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.4);
  z-index: 9999;
}
.modal-main{
  width: 80%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.modal-title{
  font-size: 60rpx;
  height: 100rpx;
  line-height: 100rpx;
}
.modal-content{
  flex: 1;
  width: 100%;
  overflow: hidden;
}
.modal-content-scroll{
  margin-left: 32rpx;
  margin-right: 32rpx;
}
.modal-button{
  font-size: 48rpx;
  width: 100%;
   height: 100rpx;
  line-height: 100rpx;
  display: flex;
  flex-direction: row;
  border-top: 2rpx solid rgba(7,17,27,0.1);

}
.modal-cancel, .modal-confirm{
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.modal-cancel{
  border-right: 2rpx solid rgba(7,17,27,0.1);
}

2.5 页面使用(json)

  自定义组件是在与pages同一目录下的components文件夹中的modal中。

{
  "usingComponents": {
    "modal":"../../components/modal/index"
  }
}

2.6 页面使用(wxml)

  使用 catchtouchmove="ture" 处理弹出对话框后下边滚动条穿透问题

<view>
  <button class="buttonClass" type="primary" bindtap='showModal'>打开弹出框</button>
  <modal modal="{{modal}}" bindsuccess='modalOperate' catchtouchmove="ture">
    <view class='modal-content' wx:for="{{content}}">{{item.text}}</view>
  </modal>
</view>

2.7 页面使用(js)

Page({

  /**
   * 页面的初始数据
   */
  data: {
    modal: {},
    content: [{
        text: '1.这是第一条数据信息,这是第一条数据信息,这是第一条数据信息,这是第一条数据信息。'
      },
      {
        text: '2.这是第二条数据信息,这是第二条数据信息,这是第二条数据信息,这是第二条数据信息,这是第二条数据信息,这是第二条数据信息,这是第二条数据信息。'
      }
    ]
  },
  showModal: function() {
    let objModal = {
      show: true,
      title: '这是一个modal',
      showCancel: false,
      height: '70%',
      confirmText: '我知道了'
    }
    this.setData({
      modal: objModal
    })
  },
  /**
   * 弹框按钮操作事件
   * @res 取消/确定按钮的相关信息
   */
  modalOperate: function(res) {
    if (res.detail.res == 'confirm') {
      console.log('confirm')
    } else if (res.detail.res == 'cancel') {
      console.log('cancel')
    }
  }
})

2.8 页面使用(wxss)

.modal-content{
  margin-left: 32rpx;
  margin-right: 32rpx;
}
.buttonClass{
  height: 100rpx
}

  

  

免责声明:文章转载自《小程序 模态对话框自定义组件(modal)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇iOS:文件归档和解归档的详解和使用Delphi 2009 之 TEdit 加强的功能下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Android FrameWork——Touch事件派发过程详解

对于android的窗口window管理,一直感觉很混乱,总想找个时间好好研究,却不知如何入手,现在写的Touch事件派发过程详解,其实跟 android的窗口window管理服务WindowManagerService存在紧密联系,所以从这里入手切入到 WindowManagerService的研究,本blog主要讲述一个touch事件如何从用户消息的...

uniapp 小程序实现自定义底部导航栏(tarbar)

在小程序开发中,默认底部导航栏很难满足实际需求,好在官方给出了自定义形式,效果如下: 话不多说,直接上代码 1.组件 custom-tarbar.vue文件 <template> <view class="tarbar"> <view class=".tarbar-list"...

实现、设置Android TabWidgetby小雨

查了好多资料,发现还是不全,干脆自己整理吧,至少保证在我的做法正确的,以免误导读者,也是给自己做个记录吧!      首先先看一个小例子,接着讲授理原             TabTest.java       view plaincopy to clipboardprint?    package org.hualang.tab;      i...

微信小程序开发五:案例实践

5.1天气预报 在这一节中,我们将开发一个天气预报的小程序,使用的数据接口为百度天气预报的接口,该接口可以根据经纬度坐标查询所在地天气。准备工作使用百度接口需要预先申请。在本书第4章中有百度ak的申请方法以及百度天气预报接口介绍。所不同的是第4章使用城市名称查询天气,而本节中使用坐标进行查询。在小程序中,将会向该地址发起请求,需要预先将百度接口所在域...

电话本小程序开发完成及感想 20111125

这周花了几天业余时间开发了一个电话本的小程序。 程序虽然很小,很简单,也很丑陋,但是确实本人开发的第一个完整的可用的App。构思,编码,简单的测试,直到制成安装包都是一个人完成。以前虽然也写了不少C#和java代码(几万行吧),也写过无数的C和C++的小玩意,但要么是只完成大项目的很小一部分,要么就是那种没啥意思的“hello world!”测试算法的可行...

wxparse使用(富文本插件)

优点:目前已知唯一可以转化HTML到小程序识别的插件 缺点:转换一个HTML标签可能需要大量的微信小程序标签还有样式 配置:第一步,下载 https://github.com/icindy/wxParse 第二步,放入项目中,我选择pages目录下 第三步,配置 wxml加入: <import src="http://t.zoukankan.com/...