小程序自定义组件的实现（案例解析）

本篇文章给大家带来的内容是关于小程序自定义组件的实现（案例解析），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

本文将结合案例，来阐述自定义组件实现。先来上图

这个是一个购物车的数量组件。主要思路：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) + 1if (this.checkIsMaxNum(num)) {/*** 大于最大数值，将输入框的值设置为最大值，* 且"+"不能点击、"-"可点击*/num = this.data.maxNumthis.data.disabledMax = truethis.data.disabledMin = false}else {this.data.disabledMin = falsethis.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, disabledMaxnum = parseInt(this.data.num) - 1if (this.checkIsMinNum(num)) { //小于最小数/*** 小于最小数值，将输入框的值设置为最小值，* 且"-"不能点击、"+"可点击*/num = this.data.minNumdisabledMin = truedisabledMax = false}else{disabledMin = falsedisabledMax = 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 = truethis.data.disabledMax = false} else if (this.checkIsMaxNum(num)) {//大于最大数this.data.disabledMax = truethis.data.disabledMin = false} else {this.data.disabledMin = falsethis.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.valuelet num = val.replace(/^[0]+[0-9]*$/gi, "")let disabledMin, disabledMaxif (this.checkIsMinNum(num)) {//输入的数量 小于最小的数，则输入框显示最小值num = this.data.minNumdisabledMin = truedisabledMax = false} else if (this.checkIsMaxNum(num)) {//输入的数量 大于最大的数，则输入框显示最大值this.data.disabledMax = truenum = this.data.maxNumdisabledMin = falsedisabledMax = true} else {//输入的数量 大于最小的数，则输入框显示输入值disabledMin = falsedisabledMax = 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, disabledMaxif (this.checkIsMinNum(this.data.num)) { //小于最小数num = this.data.minNumdisabledMin = truedisabledMax = false} else if (this.checkIsMaxNum(this.data.num)){//大于最大数num = this.data.maxNumdisabledMax = truedisabledMin = false}else {num = this.data.numdisabledMin = falsedisabledMax = false}this.setData({num: num,disabledMin: disabledMin,disabledMax: disabledMax})},},/*** 组件的方法列表*/methods: {// 减少数量_reduce: function (e) {// console.log("_reduce======", this.data.maxNum)let num, disabledMin, disabledMaxnum = parseInt(this.data.num) - 1if (this.checkIsMinNum(num)) { //小于最小数num = this.data.minNumdisabledMin = truedisabledMax = false}else{disabledMin = falsedisabledMax = 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.maxNumthis.data.disabledMax = truethis.data.disabledMin = false}else {this.data.disabledMin = falsethis.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.valuevar num = val.replace(/^[0]+[0-9]*$/gi, "")if (this.checkIsMinNum(num)) {//小于最小数this.data.disabledMin = truethis.data.disabledMax = false} else if (this.checkIsMaxNum(num)) {//大于最大数this.data.disabledMax = truethis.data.disabledMin = false} else {this.data.disabledMin = falsethis.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.valuelet num = val.replace(/^[0]+[0-9]*$/gi, "")let disabledMin, disabledMaxif (this.checkIsMinNum(num)) {//输入的数量 小于最小的数，则输入框显示最小值num = this.data.minNumdisabledMin = truedisabledMax = false} else if (this.checkIsMaxNum(num)) {//输入的数量 大于最大的数，则输入框显示最大值this.data.disabledMax = truenum = this.data.maxNumdisabledMin = falsedisabledMax = true} else {//输入的数量 大于最小的数，则输入框显示输入值disabledMin = falsedisabledMax = 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>以上就是小程序自定义组件的实现（案例解析）的详细内容，更多请关注小潘博客其它相关文章！