小编给大家分享一下小程序使用自定义组件的示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
先来上图 
这个是一个购物车的数量组件。主要思路：
1、可以手动的输入具体的数量
2、可自定义设置最小值、和最大值。当是最小值时，“-”号置灰，并不可点击。当是最大值时，“+”号置灰，并不可点击。
3、当手动输入“0”开头的数字时，自行过滤，禁止输入，只值输入非0数字。
4、当手动输入数字大于最大值时，输入框失去焦点，默认将输入值置为最大值。或者当手动输入数字小于最小值时，输入框失去焦点，默认将输入值置为最小值
5、如果属性值minNum最小值、或者maxNum最大值设置为NaN，则表示最小值和最大值的大小没有输入的限制
6、默认最小值和最大值是没有限制的，可以随便输入
输入框数值变化最终响应的函数 showNumber: function (e) { var num = e.detail.num },{ "usingComponents": { /** * key:自定义组件的别名，在使用组件时用到。相当于Android自定义控件在xml文件中的申明的命名空间 * value: 自定义组件的全路径 */ "component-option-num": "/component/optionNumber-component/optionNumber-component" } }1、这里设置了最小值是0，最大值是20。
2、bindoptionNum：是由bind+"optionNum"自定义组件回调函数的名称组成。当自定义组件的函数回调是，这个属性指定的方法bindoptionNum将被响应。并可以获取传入的值
<component-option-num bindoptionNum="showNumber" minNum="0" maxNum="20"></component-option-num>
/** * 组件的属性列表 */ properties: { //最小值 minNum:{ type:Number, value: NaN },//最大值 maxNum:{ type:Number, value:NaN }, }, /** * 组件的初始数据 */ data: { num: 0, //输入框显示的数量 disabledMin: false, //"-"是否可点击，true 不能点击 disabledMax:false //"+"是否可点击，true 不能点击 }, _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 }) }, _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}) }, _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 }) }, _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 }) },// 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 } } })<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>.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;}{ "component": true, "usingComponents": {}}以上是“小程序使用自定义组件的示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
