美文网首页
第二篇：自定义组件——购物车控件

第二篇：自定义组件——购物车控件

作者: 码农壹号 | 来源:发表于2018-09-15 17:47 被阅读0次

    本文将结合案例，来阐述自定义组件实现。点击我查看完整项目
    先来上图

    自定义控件.png

    这个是一个购物车的数量组件。主要思路：
    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.js
Component({
  /**
   * 组件的属性列表
   */
  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": {}
}

    相关文章

      网友评论

          本文标题：第二篇：自定义组件——购物车控件

          本文链接：https://www.haomeiwen.com/subject/cxjtnftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|第二篇：自定义组件——购物车控件|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！