本篇文章给大家带来的内容是关于小程序自定义组件的实现（案例解析），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
本文将结合案例，来阐述自定义组件实现。
先来上图
这个是一个购物车的数量组件。主要思路：
 1、可以手动的输入具体的数量
 2、可自定义设置最小值、和最大值。当是最小值时，“-”号置灰，并不可点击。当是最大值时，“+”号置灰，并不可点击。
 3、当手动输入“0”开头的数字时，自行过滤，禁止输入，只值输入非0数字。
 4、当手动输入数字大于最大值时，输入框失去焦点，默认将输入值置为最大值。或者当手动输入数字小于最小值时，输入框失去焦点，默认将输入值置为最小值
 5、如果属性值minnum最小值、或者maxnum最大值设置为nan，则表示最小值和最大值的大小没有输入的限制
 6、默认最小值和最大值是没有限制的，可以随便输入
一、使用自定义组件的方式1、js文件中：输入框数值变化最终响应的函数 shownumber: function (e) { var num = e.detail.num },
2、json文件中：{ "usingcomponents": { /** * key:自定义组件的别名，在使用组件时用到。相当于android自定义控件在xml文件中的申明的命名空间 * value: 自定义组件的全路径 */ "component-option-num": "/component/optionnumber-component/optionnumber-component" }}
3、wxml文件中： 1、这里设置了最小值是0，最大值是20。
2、bindoptionnum：是由bind+"optionnum"自定义组件回调函数的名称组成。当自定义组件的函数回调是，这个属性指定的方法bindoptionnum将被响应。并可以获取传入的值
<component-option-num bindoptionnum="shownumber" minnum="0" maxnum="20"></component-option-num>
一、自定义组件的定义1、 对外提供的自定义属性值 /** * 组件的属性列表 */ properties: { //最小值 minnum:{ type:number, value: nan },//最大值 maxnum:{ type:number, value:nan }, },
2、 组件内部使用的数据 /** * 组件的初始数据 */ data: { num: 0, //输入框显示的数量 disabledmin: false, //"-"是否可点击，true 不能点击 disabledmax:false //"+"是否可点击，true 不能点击 },
3、 增加数量方法 _add: function (e) { let num = parseint(this.data.num) + 1 if (this.checkismaxnum(num)) { /** * 大于最大数值，将输入框的值设置为最大值， * 且"+"不能点击、"-"可点击 */ num = this.data.maxnum this.data.disabledmax = true this.data.disabledmin = false }else { this.data.disabledmin = false this.data.disabledmax = false } this.setdata({ num: num, disabledmin: this.data.disabledmin, disabledmax: this.data.disabledmax }) //回调optionnum方法，将输入框num值传递给使用该组件的函数 this.triggerevent('optionnum', { num: num }) },
4、减少数量 _reduce: function (e) { let num, disabledmin, disabledmax num = parseint(this.data.num) - 1 if (this.checkisminnum(num)) { //小于最小数 /** * 小于最小数值，将输入框的值设置为最小值， * 且"-"不能点击、"+"可点击 */ num = this.data.minnum disabledmin = true disabledmax = false }else{ disabledmin = false disabledmax = false } this.setdata({ num: num, disabledmin: disabledmin, disabledmax: disabledmax }) //回调optionnum方法，将输入框num值传递给使用该组件的函数 this.triggerevent('optionnum',{num:num}) },
5、手动输入数量 _input: function (e) { let val = e.detail.value //1、先用正则校验输入的第一个数字，当手动输入“0”开头的数字时，自行过滤，禁止输入，只值输入非0数字 var num = val.replace(/^[0]+[0-9]*$/gi, "") /** * 大于最大数值，将输入框的值设置为最大值，且"+"不能点击、"-"可点击。反之亦然 */ if (this.checkisminnum(num)) { //小于最小数 this.data.disabledmin = true this.data.disabledmax = false } else if (this.checkismaxnum(num)) { //大于最大数 this.data.disabledmax = true this.data.disabledmin = false } else { this.data.disabledmin = false this.data.disabledmax = false } this.setdata({ num: num, disabledmin: this.data.disabledmin, disabledmax:this.data.disabledmax }) this.triggerevent('optionnum', { num: num }) },
6、失去焦点 _blur:function(e){ let val = e.detail.value let num = val.replace(/^[0]+[0-9]*$/gi, "") let disabledmin, disabledmax if (this.checkisminnum(num)) { //输入的数量 小于最小的数，则输入框显示最小值 num = this.data.minnum disabledmin = true disabledmax = false } else if (this.checkismaxnum(num)) { //输入的数量 大于最大的数，则输入框显示最大值 this.data.disabledmax = true num = this.data.maxnum disabledmin = false disabledmax = true } else { //输入的数量 大于最小的数，则输入框显示输入值 disabledmin = false disabledmax = false } this.setdata({ num: num, disabledmin: disabledmin, disabledmax: disabledmax }) this.triggerevent('optionnum', { num: num }) },
附自定义组件的全部代码1、js中的代码// component/optionnumber-component/optionnumber-component.jscomponent({ /** * 组件的属性列表 */ properties: { minnum:{ type:number, value: nan }, maxnum:{ type:number, value:nan }, }, /** * 组件的初始数据 */ data: { num: 0, disabledmin: false, disabledmax:false }, lifetimes:{ // 初始化数据 attached:function(){ let num, disabledmin, disabledmax if (this.checkisminnum(this.data.num)) { //小于最小数 num = this.data.minnum disabledmin = true disabledmax = false } else if (this.checkismaxnum(this.data.num)){ //大于最大数 num = this.data.maxnum disabledmax = true disabledmin = false }else { num = this.data.num disabledmin = false disabledmax = false } this.setdata({ num: num, disabledmin: disabledmin, disabledmax: disabledmax }) }, }, /** * 组件的方法列表 */ methods: { // 减少数量 _reduce: function (e) { // console.log("_reduce======", this.data.maxnum) let num, disabledmin, disabledmax num = parseint(this.data.num) - 1 if (this.checkisminnum(num)) { //小于最小数 num = this.data.minnum disabledmin = true disabledmax = false }else{ disabledmin = false disabledmax = false } this.setdata({ num: num, disabledmin: disabledmin, disabledmax: disabledmax }) // console.log("disabledmin======", this.data.disabledmin) this.triggerevent('optionnum',{num:num}) }, // 增加数量 _add: function (e) { let num = parseint(this.data.num) + 1 // console.log("_add======", this.data.maxnum) if (this.checkismaxnum(num)) { //大于最大数 num = this.data.maxnum this.data.disabledmax = true this.data.disabledmin = false }else { this.data.disabledmin = false this.data.disabledmax = false } this.setdata({ num: num, disabledmin: this.data.disabledmin, disabledmax: this.data.disabledmax }) this.triggerevent('optionnum', { num: num }) }, // 手动输入数量 _input: function (e) { let val = e.detail.value var num = val.replace(/^[0]+[0-9]*$/gi, "") if (this.checkisminnum(num)) { //小于最小数 this.data.disabledmin = true this.data.disabledmax = false } else if (this.checkismaxnum(num)) { //大于最大数 this.data.disabledmax = true this.data.disabledmin = false } else { this.data.disabledmin = false this.data.disabledmax = false } this.setdata({ num: num, disabledmin: this.data.disabledmin, disabledmax:this.data.disabledmax }) this.triggerevent('optionnum', { num: num }) }, // 失去焦点 _blur:function(e){ // console.log("_confirm======") let val = e.detail.value let num = val.replace(/^[0]+[0-9]*$/gi, "") let disabledmin, disabledmax if (this.checkisminnum(num)) { //输入的数量 小于最小的数，则输入框显示最小值 num = this.data.minnum disabledmin = true disabledmax = false } else if (this.checkismaxnum(num)) { //输入的数量 大于最大的数，则输入框显示最大值 this.data.disabledmax = true num = this.data.maxnum disabledmin = false disabledmax = true } else { //输入的数量 大于最小的数，则输入框显示输入值 disabledmin = false disabledmax = false } this.setdata({ num: num, disabledmin: disabledmin, disabledmax: disabledmax }) this.triggerevent('optionnum', { num: num }) }, // 检查是否是最大数 checkismaxnum: function (checknum) { return this.data.maxnum != "nan" && checknum >= this.data.maxnum }, // 检查是否是最小数 checkisminnum: function (checknum) { return this.data.minnum != "nan" && checknum <= this.data.minnum } }})
2、wxml中的代码<view class='optionview'> <button class="item" bindtap="_reduce" disabled="{{disabledmin}}" style="border:0;background:white" plain='true'> <image class="imgreduce" src="{{disabledmin ? '/images/icon/ic_reduce_grey.png' : '/images/icon/ic_reduce.png'}}"></image> </button> <view class="space">|</view> <view class="item"> <input class="inputnum" type='number' maxlength='3' bindinput="_input" value="{{num}}" placeholder="0" confirm-type="确认" bindblur="_blur" placeholder-style="font-size:26rpx;color:#c81432"></input> </view> <view class="space">|</view> <button class="item" bindtap="_add" disabled="{{disabledmax}}" style="margin-left:6rpx;border:0;background:white" plain='true'> <image class="imgadd" src="{{disabledmax ? '/images/icon/ic_add_grey.png' : '/images/icon/ic_add.png'}}"></image> </button></view>
3、wxss中的代码.optionview{ height: 58rpx; width: 240rpx; display: flex; flex-direction: row; border: 1rpx solid #999; border-radius: 10rpx; justify-content: space-around; align-items: center; align-content: center; background: white; margin-right: 64rpx;}.item{ flex: 1; display: flex; align-items: center; align-content: center; justify-content: space-around;}.space{ height: 40rpx; width: 1rpx; color: #999; font-size: 30rpx;}.imgadd{ width: 16rpx; height: 16rpx; padding-top: 14rpx; padding-bottom: 14rpx}.imgreduce{ width: 16rpx; height: 3.5rpx; padding-top: 18rpx; padding-bottom: 18rpx}.inputnum{ width: 70rpx; color: #c81432; font-size: 26rpx; text-align: center; padding-left: 10rpx; padding-right: 10rpx;}.textmax{ margin-top: 45rpx; margin-bottom: 36rpx;}
4、json中的代码{ "component": true, "usingcomponents": {}}
以上就是小程序自定义组件的实现（案例解析）的详细内容。