微信小程序自定义组件

类似于购物车加减带输入框的微信小程序组件

第一步
新建一个 component 文件夹，我们的所有组件都存放在这里。因为我们今天要做一个计数器组件，所以点击右键新建一个 stepper 文件夹，里面的会生成对应的 json wxml wxss js 4个文件。

第二步
将 stepper.json 中 component 字段设为 true。

{
  "component": true
}

第三步
stepper.wxml

<view class="stepper">
  <button class="{{minusStatus}}" hover-class='stepper-b' bindtap="bindMinus">-</button>
  <input type="number" bindchange="bindManual" value="{{num}}" />
  <button class="normal" hover-class='stepper-b' bindtap="bindPlus">+</button>
</view>

第四步
stepper.wxss

/*输入框加减按钮*/

.stepper {
  flex: 1; 
  height: 88rpx;
  background: #e8e8e8;
  border-radius: 3px;
  position: relative;
  margin: 0 20rpx;
}

.stepper >button {
  width: 84rpx;
  height: 84rpx;
  line-height: 78rpx;
  background: #fff;
  color: #6c6fc0;
  font-size: 56rpx;
  text-align: center; 
  display: block; 
  border-radius: 3px;
}
.stepper >button:first-child {
  position: absolute;
  left: 2rpx;
  top: 2rpx;
}
.stepper >button:last-child {
  position: absolute;
  right: 2rpx;
  top: 2rpx;
}

.stepper >button.stepper-b{
  background: #6c6fc0;
  color: #fff;
}

.stepper input {
  flex: 1;
  height: 88rpx;
  text-align: center;
  font-size: 28rpx;
  margin: 0 88rpx;
}

.stepper .normal {
  color: #6c6fc0;
}

.stepper .disabled {
  color: #aaaaaa;
}

第五步
stepper.js，注意，事件需要写在methods里面。

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  properties: {
    // 
    num: {            // 属性名
      type: Number,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: 18     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    step:{
      type:Number,
      value:1
    }
  },

  /**
   * 私有数据,组件的初始数据
   * 可用于模版渲染
   */
  data: {
    minusStatus: 'normal'
  },


  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */
  methods: {
    /* 点击减号 */
    bindMinus: function() {
      var num = this.data.num;
      if (num > 1) {
        num-=this.data.step;
      }
      var minusStatus = num <= 1 ? 'disabled' : 'normal';
      this.setData({
        num: num,
        minusStatus: minusStatus
      });
      this.pushValueChange();
    },
    /* 点击加号 */
    bindPlus: function() {
      var num = this.data.num;
      num += this.data.step;
      var minusStatus = num < 1 ? 'disabled' : 'normal';
      this.setData({
        num: num,
        minusStatus: minusStatus
      });
      this.pushValueChange();
    },
    /* 输入框事件 */
    bindManual: function(e) {
      var num = e.detail.value;
      this.setData({
        num: num
      });
      this.pushValueChange();
    },pushValueChange:function(){
      const myEventDetail = {val:this.data.num} // detail对象，提供给事件监听函数       
      this.triggerEvent('valueChange', myEventDetail)
    }
  }

})

组件已经布置好了。现在如何调用呢？

第一步，首先需要在 index.json 中引入组件：

{
  "usingComponent": {
    "stepper": "/components/stepper/stepper"
  }
}

第二步，在 index.wxml 中引入它

<stepper id="lesson" name='time' num="{{num}}" bindvalueChange="valueChange" style="flex:1;"></stepper>

最后一步，index.js 配置

var app = getApp();
Page({
  data: {
    num: 20
	}
})

这样，一个简单的自定义组件就完成了。