小程序组件创建

组件内容:

index.js文件

Component({
    /**
     * 组件的属性列表
     */
    properties: {     //组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段,
        condition:{    //type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
            type:Boolean,
            value:false
        }
    },

    /**
     * 组件的初始数据
     */
    data: {    //组件的内部数据,和 properties 一同用于组件的模版渲染

    },

    /**
     * 组件的方法列表
     */
    methods: {    //组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用
        tap(){
            this.setData({
                condition: false
            })
        }
    }
})

index.json

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

index.wsxx

/* components/myHint/index.wxss */
@import '../../app.wxss';
.modal{
  width: 100%;
  height: 100%;
  z-index:100;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 38rpx;
}

index.wxml

<view class='modal' wx:if="{{condition}}" bindtap='tap'>
  <view class='jt'>
    <icon class='iconfont icon-zhishijiantou'></icon>
  </view> 
  <view class='hint-text'>
    您还没有验证手机号码
  </view>
</view>

父组件引用子组件:

index.json

{
  "navigationBarTitleText": "订单详情",
  "usingComponents": {
    "orderGoods": "../../../components/orderGoods/index",
    "statusTime": "../../../components/statusTime/index",
    "popupButton": "../../../components/popupButton/index"
  },
  "enablePullDownRefresh": false
}

index.wxml

  <block wx:for="{{form.goods}}" wx:key="index">
      <orderGoods jdata="{{item}}" status="{{form.status.types}}"></orderGoods>
    </block>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容