微信小程序自定义组件

2020-12-17  本文已影响0人  随烟灬

先附上微信小程序组件封装官方指南地址

一、如何创建组件

<!--component/bottomBtn.wxml-->
<view class='fixed-bottom-height'></view>
<view class="fixed-bottom-btn {{showCancel ? 'two':''}}">
    <block wx:if="{{showCancel}}">
        <button bindtap="tapCancel" class='btn-gray' style="padding-bottom: {{iphone_tag ? 68:0}}rpx;">{{cancelText}}</button>
    </block>
    <button class="bg-blue" bindtap="touchSubmitBtn" loading="{{loading}}" disabled="{{disabled}}" style="padding-bottom: {{iphone_tag ? 68:0}}rpx;">{{btnText}}</button>
</view>
.fixed-bottom-height {
  height: 200rpx;
}
.fixed-bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0rpx;
  background-color: white;
  border-top: 2rpx solid #f1f1f1;
  z-index: 100;
  font-size: 0;
}
.fixed-bottom-btn button {
  font-size: 36rpx;
  border-radius: 0rpx;
  padding-top: 20rpx;
  min-height: 130rpx;
}
.fixed-bottom-btn.two button {
  display: inline-block;
  width: 50%; 
}
.fixed-bottom-btn.two button.reject {
  background-color: #e0e0e0 !important;
}
.bg-blue{
  background-color: #418ef6 !important;
  color: white;
  border-color: #418ef6;
}
// component/bottomBtn.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    btnText: {
      type: String,
      value: '提交'
    },
    loading: {
      type: Boolean,
      value: false
    },
    disabled: {
      type: Boolean,
      value: false
    },
    showCancel: {
      type: Boolean,
      value: false
    },
    cancelText: {
      type: String,
      value: '删除'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 提交按钮
    touchSubmitBtn() {
      this.triggerEvent('save')
    },
    /**
     * 删除/取消
     */
    tapCancel() {
      this.triggerEvent('cancel')
    }
  }
})

二、如何使用组件

"usingComponents": {
  "bottom-btn": "/component/bottomBtn/bottomBtn"
}
<bottom-btn btnText="确定"  bind:save="tapConfirm"></bottom-btn>
tapConfirm() {
  // do something
}
上一篇下一篇

猜你喜欢

热点阅读