微信小程序之公共组件写法

超、凢脫俗 2022-03-18 09:58 472阅读 0赞

我们要实现如下图功能  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]  
小程序一个公共的弹出组件，首先我们创建一个pop文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70 1]  
然后在生成的pop.json文件中将component定义为true

{
      "component": true
    }

为pop.wxml添加内容

<view class='wx_dialog' hidden="{
       {!isShow}}">
      <view class='wx-mask'></view>
      <view class='wx-dialog-content'>
        <view class='wx-dialog-title'>{
       { title }}</view>
        <view class='wx-dialog-contents'>{
       { content }}</view>
        <view class='wx-dialog-footer'>
          <view class='wx-dialog-btn' catchtap='_cancelEvent'>{
       { cancelText }}</view>
          <view class='wx-dialog-btn' catchtap='_confirmEvent'>{
       { confirmText }}</view>
        </view>
      </view>
    </view>

pop.wxss

/* pages/common/pop/pop.wxss */
    .wx_dialog {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    .wx-mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .3);
      z-index: 99;
    }
    .wx-dialog-content {
      position: absolute;
      background: #fff;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      /* height: 200px; */
      padding-bottom: 60px;
      z-index: 100;
      border-radius: 5px;
    }
    .wx-dialog-contents {
      padding: 10px;
    }
    .wx-dialog-title {
      padding: 5px 10px;
      font-size: 14px;
    }
    .wx-dialog-footer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      border-top: 1px solid #eee;
    }
    .wx-dialog-btn {
      display: inline-block;
      width: 49%;
      cursor: pointer;
      text-align: center;
    }
    .wx-dialog-btn:first-child {
      border-right: 1px solid #eee;
    }

pop.js

// pages/common/pop/pop.js
    Component({ 
      options: { 
        multipleSlots: true // 在组件定义时的选项中启用多slot支持 
      }, 
      /** 
       * 组件的属性列表 
       * 用于组件自定义设置 
      */ 
      properties: {
        // 弹窗标题 
        title: { // 属性名 
          type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） 
          value: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个 
        }, 
        // 弹窗内容 
        content: { type: String, value: '弹窗内容' }, 
        // 弹窗取消按钮文字 
        cancelText: { type: String, value: '取消' }, 
        // 弹窗确认按钮文字 
        confirmText: { type: String, value: '确定' } 
      }, 
      /** 
       * 私有数据,组件的初始数据 
       * 可用于模版渲染 
       */ 
      data: { // 弹窗显示控制 
        isShow: false
      }, 
      /**
       * 组件的方法列表 
       * 更新属性和数据的方法与更新页面数据的方法类似 
      */ 
      methods: { 
        /** 
        * 公有方法 
        */
        //隐藏弹框 
        hideDialog() { 
          this.setData({ 
            isShow: !this.data.isShow 
          }) 
        }, 
        //展示弹框 
        showDialog() { 
          this.setData({ 
            isShow: !this.data.isShow 
          }) 
        }, 
        /** 
         * 内部私有方法建议以下划线开头 
         * triggerEvent 用于触发事件 
        */ 
        _cancelEvent() { //触发取消回调 
          this.triggerEvent("cancelEvent") 
        }, 
        _confirmEvent() { //触发成功回调 
          this.triggerEvent("confirmEvent"); 
        } 
      } 
    })

在父级页面的.js文件中添加

/**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        this.dialog = this.selectComponent("#dialog"); 
      },
      showDialog() {
        this.dialog.showDialog();
      },
      //取消事件 
      _cancelEvent() {
        console.log('你点击了取消');
        this.dialog.hideDialog();
      }, 
      //确认事件 
      _confirmEvent() {
        console.log('你点击了确定');
        this.dialog.hideDialog();
      },

父级页面的.json文件中添加

{
    　　"usingComponents": {"pop": "../common/pop/pop"}
    }

在父级页面的.wxml文件中添加

然后就大功告成了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70 2]  
转自：[https://www.cnblogs.com/kdcg/p/9115778.html][https_www.cnblogs.com_kdcg_p_9115778.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]: /images/20220318/f65a36338f6c49d79a794d6bd38c0e41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70 1]: /images/20220318/e2a09ca1125e4e4184a7f3bad165b96b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70 2]: /images/20220318/d9d69be0d94f4b1b9b0b84f190dcaeaa.png
[https_www.cnblogs.com_kdcg_p_9115778.html]: https://www.cnblogs.com/kdcg/p/9115778.html