小程序使用自定义组件的示例

小编给大家分享一下小程序使用自定义组件的示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联致力于成都网站建设、做网站,成都网站设计,集团网站建设等服务标准化，推过标准化降低中小企业的建站的成本，并持续提升建站的定制化服务水平进行质量交付，让企业网站从市场竞争中脱颖而出。选择创新互联，就选择了安全、稳定、美观的网站建设服务！

先来上图
小程序使用自定义组件的示例

这个是一个购物车的数量组件。主要思路：
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将被响应。并可以获取传入的值

一、自定义组件的定义

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中的代码

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": {}}

以上是“小程序使用自定义组件的示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网页名称：小程序使用自定义组件的示例
文章分享：http://chengdu.cdxwcx.cn/article/jjsgos.html

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

小程序使用自定义组件的示例

一、使用自定义组件的方式

1、js文件中：

2、json文件中：

3、wxml文件中：

一、自定义组件的定义

1、对外提供的自定义属性值

2、组件内部使用的数据

3、增加数量方法

4、减少数量

5、手动输入数量

6、失去焦点

附自定义组件的全部代码

1、js中的代码

2、wxml中的代码

3、wxss中的代码

4、json中的代码

其他资讯

如何使用Linux内核调优技巧提升系统性能

使用Linux命令行进行系统监测和故障排除

5个提高你的Linux系统管理员技能的练习

为什么大多数企业正逐渐将数据中心迁移到云上

精进云计算，就要深入理解云中网络技术与配置

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

小程序使用自定义组件的示例

一、使用自定义组件的方式

1、js文件中：

2、json文件中：

3、wxml文件中：

一、自定义组件的定义

1、 对外提供的自定义属性值

2、 组件内部使用的数据

3、 增加数量方法

4、减少数量

5、手动输入数量

6、失去焦点

附自定义组件的全部代码

1、js中的代码

2、wxml中的代码

3、wxss中的代码

4、json中的代码

其他资讯

如何使用Linux内核调优技巧提升系统性能

使用Linux命令行进行系统监测和故障排除

5个提高你的Linux系统管理员技能的练习

为什么大多数企业正逐渐将数据中心迁移到云上

精进云计算，就要深入理解云中网络技术与配置

成都网站建设设计将想法与焦点和您一起共享

1、对外提供的自定义属性值

2、组件内部使用的数据

3、增加数量方法