美文网首页程序员
小程序自定义控件(二)

小程序自定义控件(二)

作者: nipeng | 来源:发表于2018-03-11 00:34 被阅读0次

    1.目标写一个在项目中用的对话框。把各个知识点整合起来。

    先看最后的效果图


    图一
    屏幕快照 2018-03-10 下午7.26.04.png

    2.创建一个对话框

    2.1 编写对话框的界面
    2.1.1 对话框的wxml代码:
    <!--pages/customComponent/customComponent.wxml-->
    <view class='mask' hidden='{{isHide}}'>
      <view class='dialog'>
        <view class='title' hidden='{{hideTitle}}'>{{title}}</view>
        <view class='content'>{{content}}</view>
        <view class='btn'>
          <view class='cancel' catchtap='_cancelEvent'>{{cancelText}}</view>
          <view class='confirm' catchtap='_confirmEvent'>{{confirmText}}</view>
        </view>
      </view>
    </view>
    
    2.1.2 对话框的wcss代码:
    /* pages/customComponent/customComponent.wxss */
    .mask {
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
    }
    
    .dialog {
      position: fixed;
      display: inline-block;
      width: 80%;
      max-width: 600rpx;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background-color: #fff;
      text-align: center;
      border-radius: 3px;
      border: 1px solid #d5d5d6;
      overflow: hidden;
    }
    
    .title {
      font-size: 18px;
      padding: 15px 15px 5px;
    }
    
    .content {
      padding: 15px 15px 5px;
      min-height: 40px;
      font-size: 16px;
      line-height: 1.3;
      word-wrap: break-word;
      word-break: break-all;
      color: #999;
      border-bottom: 1px solid #d5d5d6;
    }
    
    .cancel, .confirm {
      display: inline-block;
      width: 50%;
      box-sizing: border-box;
      font-size: 17px;
      padding: 10px 0;
    }
    
    .cancel {
      color: #353535;
    }
    
    .confirm {
      color: #3cc51f;
      border-left: 1px solid #d5d5d6;
    }
    
    2.1.3 编写对话框的逻辑
    // pages/customComponent/customComponent.js
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        // 弹窗标题
        title: {            // 属性名
          type: String,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
          value: '标题'     // 属性初始值(可选),如果未指定则会根据类型选择一个
        },
        // 弹窗内容
        content: {
          type: String,
          value: '我就试试'
        },
        // 弹窗取消按钮文字
        cancelText: {
          type: String,
          value: '取消'
        },
        // 弹窗确认按钮文字
        confirmText: {
          type: String,
          value: '确定'
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        // 弹窗显示控制
        hideTitle: false,
        isHide: true
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        /*
        * 公有方法
        */
    
        //隐藏弹框
        hideDialog() {
          this.setData({
            isHide: !this.data.isHide
          })
        },
        //展示弹框
        showDialog() {
          this.setData({
            isHide: !this.data.isHide
          })
        },
        //隐藏标题
        hideTitle(flag) {
          this.setData({
            hideTitle: flag
          })
        },
        /*
        * 内部私有方法建议以下划线开头
        * triggerEvent 用于触发事件
        */
        _cancelEvent() {
          //触发取消回调
          this.triggerEvent("cancelEvent")
        },
        _confirmEvent() {
          //触发成功回调
          this.triggerEvent("confirmEvent");
        }
      }
    })
    

    在小程序的默认文件里面就有:组件的初始数据data、组件的属性列表properties、组件的方法列表methods。就好像一个类,一开始有初始数据,属性、方法。

    3.在其他组件中使用这个对话框

    3.1 配置文件里面声明
    {
      "usingComponents": {
        "dialog": "/pages/customComponent/customComponent"
      }
    }
    
    3.2 在wxml文件中使用
    <!--index.wxml-->
    <dialog id='dialog' 
      title='我是标题'
      content='我是内容,我就想试试'
      cancelText='不试了'
      confirmText='试一试'
      bind:cancelEvent="_cancelEvent"  
      bind:confirmEvent="_confirmEvent"
    ></dialog>
    <view catchtap='showDialog' >显示有标题的对话框</view>
    <view catchtap='showDialogNoTitle'>显示没有标题的对话框</view>
    
    3.3 在js文件中进行逻辑操作
    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
      },
      onReady: function () {
        //获得dialog组件
        this.dialog = this.selectComponent("#dialog");
      },
      //事件处理函数
      showDialog: function() {
        console.log('showDialog');
        this.dialog.hideTitle(false);
        this.dialog.showDialog();
      },
      showDialogNoTitle: function () {
        this.dialog.hideTitle(true);
        this.dialog.showDialog();
      },
      _cancelEvent: function () {
        this.dialog.hideDialog();
      },
      _confirmEvent() {
        // 在此处写确定的逻辑代码
        console.log('_confirmEvent');
        this.dialog.hideDialog();
      }
    })
    

    最后的运行结果就是步骤二中呈现的了。

    4.编写的思路总结

    4.1 编写组件

    这个可以分为:编写组件的界面、编写组件的逻辑。

    4.2 使用组件

    注意:首先要在配置文件中声明药使用的的组件
    然后在wxml文件引入要使用的组件。
    最后在逻辑代码中进行控制。

    5.参考地址

    http://blog.csdn.net/rolan1993/article/details/78801052/
    http://www.ifanr.com/minapp/966941

    相关文章

      网友评论

        本文标题:小程序自定义控件(二)

        本文链接:https://www.haomeiwen.com/subject/oanvfftx.html