微信小程序|小程序开发
购物车,数量组件
微信小程序-小程序开发
科技公司 asp源码,vscode格式化文档风格,ubuntu usb端口,电脑是否装tomcat,爬虫抓取资源,php环境探针,黄浦seo优化关键词公司,seo网站后台管理lzw
本篇文章给大家带来的内容是关于小程序自定义组件的实现（案例解析），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
星外销售源码,ubuntu改变文件时间,服务器tomcat清理缓存,crawl爬虫代码,笔记网站开源php,盐田seo方案lzw
开单大师 源码,vscode插件接口文档,ubuntu怎么超级,tomcat部署访问项目,sqlite平均数的语句,洗衣机地漏有小爬虫吗,php 输出json格式,德州seo公司名字,php案列网站,教育h5模板下载lzw
本文将结合案例，来阐述自定义组件实现。
先来上图
这个是一个购物车的数量组件。主要思路：
1、可以手动的输入具体的数量
2、可自定义设置最小值、和最大值。当是最小值时，“-”号置灰，并不可点击。当是最大值时，“+”号置灰，并不可点击。
3、当手动输入“0”开头的数字时，自行过滤，禁止输入，只值输入非0数字。
4、当手动输入数字大于最大值时，输入框失去焦点，默认将输入值置为最大值。或者当手动输入数字小于最小值时，输入框失去焦点，默认将输入值置为最小值
5、如果属性值minNum最小值、或者maxNum最大值设置为NaN，则表示最小值和最大值的大小没有输入的限制
6、默认最小值和最大值是没有限制的，可以随便输入
A、使用自定义组件的方式
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将被响应。并可以获取传入的值
A、自定义组件的定义
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.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, disabledMaxnum = parseInt(this.data.num) - 1if (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, disabledMaxnum = parseInt(this.data.num) - 1if (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.valuevar 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中的代码
||
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": {}}
