zoukankan      html  css  js  c++  java
  • 微信小程序 自定义组件(modal) 引入组件

    项目结构:

    步骤一:创建组件

    声明这一组文件为自定义组件

    modal.json

    {
      "component": true, // 自定义组件声明
      "usingComponents": {} // 可选项,用于引用别的组件
    }

    步骤二:编写组件代码

    1.逻辑层

    modal.js

    Component({
      properties: {
        modalHidden: {
          type: Boolean,
          value: true
        }, //这里定义了modalHidden属性,属性值可以在组件使用时指定.写法为modal-hidden  
        modalMsg: {
          type: String,
          value: ' ',
        }
      },
      data: {
        // 这里是一些组件内部数据  
        text: "text",
      },
      methods: {
        // 这里放置自定义方法  
        modal_click_Hidden: function () {
          this.setData({
            modalHidden: true,
          })
        },
        // 确定  
        Sure: function () {
          console.log(this.data.text)
        }
      }
    })

    2.页面布局

    modal.wxml

    <view hidden='{{modalHidden}}'>  
      <view class='mask_layer' bindtap='modal_click_Hidden' />  
      <view class='modal_box'>  
        <view class="title">提示</view>  
        <view class='content'>  
          <text class='modalMsg'>{{modalMsg}}</text>  
        </view>  
        <view class='btn'>  
          <view bindtap='modal_click_Hidden' class='cancel'>取消</view>  
          <view bindtap='Sure' class='Sure'>确定</view>  
        </view>  
      </view>  
    </view>

    3.样式

    modal.wxss

    .mask_layer {  
       100%;  
      height: 100%;  
      position: fixed;  
      z-index: 1000;  
      background: #000;  
      opacity: 0.5;  
      overflow: hidden;  
    }  
    .modal_box {  
       76%;  
      overflow: hidden;  
      position: fixed;  
      top: 50%;  
      left: 0;  
      z-index: 1001;  
      background: #fafafa;  
      margin: -150px 12% 0 12%;  
      border-radius: 3px;  
    }  
      
    .title {  
      padding: 15px;  
      text-align: center;  
      background-color: gazure;  
    }  
      
    .content {  
      overflow-y: scroll; /*超出父盒子高度可滚动*/  
    }  
      
    .btn {  
       100%;  
      margin-top: 65rpx;  
      display: flex;  
      flex-direction: row;  
      align-items: center;  
      justify-content: space-between;  
      box-sizing: border-box;  
      background-color: white;  
    }  
      
    .cancel {  
       100%;  
      padding: 10px;  
      text-align: center;  
      color: red;  
    }  
      
    .Sure {  
       100%;  
      padding: 10px;  
      background-color: gainsboro;  
      text-align: center;  
    }  
      
    .modalMsg {  
      text-align: center;  
      margin-top: 45rpx;  
      display: block;  
    }

    步骤三:使用组件

    这里我是在 pages/index/index 页面调用 pages/modal/modal 自定义组件

    首先在index.json中进行引用说明, 这里是设置自定义组件的标签名和引用路径

    {
      "usingComponents": {
        "modal": "../../component/modal/modal"
      }
    }

    然后在index.wxml调用组件

    <!-- 调用modal组件 -->  
    <modal modal-hidden="{{is_modal_Hidden}}" modal-msg="{{is_modal_Msg}}"/>
    

    在index.js绑定数据

    Page({  
      data: {  
        is_modal_Hidden:false,  
        is_modal_Msg:'我是一个自定义组件'  
      }  
    })

    步骤四:效果图

  • 相关阅读:
    SharePoint 2013 中的SQL Server 安全
    SharePoint 2013 的HTML5特性之响应式布局
    SharePoint 2013 一些小技巧
    SharePoint 2013 排错之"Code blocks are not allowed in this file"
    SharePoint 2013 创建搜索中心及搜索设置
    SharePoint 2013 使用PowerShell创建State Service
    SharePoint 2013 内容部署功能简介
    SharePoint 使用PowerShell恢复误删的网站集
    SharePoint 自定义WebPart之间的连接
    linux之misc及使用misc创建字符设备
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8334925.html
Copyright © 2011-2022 走看看