Heim  >  Artikel  >  WeChat-Applet  >  Implementierung kundenspezifischer Komponenten des Miniprogramms (Fallanalyse)

Implementierung kundenspezifischer Komponenten des Miniprogramms (Fallanalyse)

不言
不言Original
2018-09-18 16:36:182482Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Implementierung benutzerdefinierter Komponenten von Miniprogrammen (Fallanalyse). Ich hoffe, dass er für Sie hilfreich ist.

In diesem Artikel werden Fälle kombiniert, um die Implementierung benutzerdefinierter Komponenten zu erläutern.
Beginnen wir mit dem Bild oben
Implementierung kundenspezifischer Komponenten des Miniprogramms (Fallanalyse)

Dies ist die Mengenkomponente eines Warenkorbs. Hauptidee:
1. Sie können die spezifische Menge manuell eingeben
2. Der Mindestwert und der Höchstwert können angepasst werden. Wenn es sich um den Mindestwert handelt, ist das „-“-Zeichen ausgegraut und kann nicht angeklickt werden. Wenn es sich um den Maximalwert handelt, ist das „+“-Zeichen ausgegraut und kann nicht angeklickt werden.
3. Bei der manuellen Eingabe von Zahlen, die mit „0“ beginnen, wird diese automatisch gefiltert und die Eingabe wird gesperrt. Es können nur Zahlen ungleich 0 eingegeben werden.
4. Wenn die manuell eingegebene Zahl größer als der Maximalwert ist, verliert das Eingabefeld den Fokus und der Eingabewert wird standardmäßig auf den Maximalwert gesetzt. Oder wenn die manuell eingegebene Zahl kleiner als der Mindestwert ist, verliert das Eingabefeld den Fokus und der Eingabewert wird standardmäßig auf den Mindestwert
gesetzt 5. Wenn der minimale Attributwert minNum oder der maximale Wert maxNum auf NaN eingestellt ist, bedeutet dies, dass es keine Eingabebeschränkung für die Größe der minimalen und maximalen Werte
gibt 6. Es gibt keine Begrenzung für die Standard-Mindest- und Höchstwerte, Sie können sie nach Belieben eingeben

1. So verwenden Sie benutzerdefinierte Komponenten

1 In der js-Datei:

输入框数值变化最终响应的函数
  showNumber: function (e) {
    var num = e.detail.num
  },

2, JSON-Datei:

{  "usingComponents": {    
/**
    *  key:自定义组件的别名,在使用组件时用到。相当于Android自定义控件在xml文件中的申明的命名空间
    *  value: 自定义组件的全路径
    */
    "component-option-num": "/component/optionNumber-component/optionNumber-component"
  }
}

3. WXML-Datei:

1. Der hier festgelegte Mindestwert ist 0 und der Höchstwert ist 20.
2. bindoptionNum: Es besteht aus bind+"optionNum", dem Namen der Rückruffunktion der benutzerdefinierten Komponente. Wenn der Funktionsrückruf der benutzerdefinierten Komponente aufgerufen wird, wird auf die durch dieses Attribut angegebene Methode bindoptionNum reagiert. Und kann den eingehenden Wert erhalten

<component-option-num bindoptionNum="showNumber" minNum="0" maxNum="20"></component-option-num>

1. Definition benutzerdefinierter Komponenten

1. Extern bereitgestellte benutzerdefinierte Attributwerte

  /**
   * 组件的属性列表
   */
  properties: {  //最小值
     minNum:{       type:Number,
       value: NaN
     },//最大值
     maxNum:{       type:Number,
       value:NaN
     },
  },

2 , Daten, die im Inneren verwendet werden die Komponente

  /**
   * 组件的初始数据
   */
  data: {
    num: 0,                //输入框显示的数量
    disabledMin: false,    //"-"是否可点击,true 不能点击
    disabledMax:false    //"+"是否可点击,true 不能点击
  },

3. Methode zur Mengenerhöhung

   _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(&#39;optionNum&#39;, { num: num })
    },

5. Menge manuell eingeben

    _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(&#39;optionNum&#39;,{num:num})
    },

6 🎜>
    _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(&#39;optionNum&#39;, { num: num })
    },

Angehängt ist der gesamte Code der benutzerdefinierten Komponente

1. Code in js

  _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(&#39;optionNum&#39;, { num: num })
    },

2. Code in wxml

// 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(&#39;optionNum&#39;,{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(&#39;optionNum&#39;, { 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(&#39;optionNum&#39;, { 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(&#39;optionNum&#39;, { 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
    }
  }
})

3

<view class=&#39;optionView&#39;>
  <button class="item" bindtap="_reduce" disabled="{{disabledMin}}" style="border:0;background:white" plain=&#39;true&#39;>
    <image class="imgReduce" src="{{disabledMin ? &#39;/images/icon/ic_reduce_grey.png&#39; : &#39;/images/icon/ic_reduce.png&#39;}}"></image>
  </button>
  <view class="space">|</view>
  <view class="item">
    <input class="inputNum" type=&#39;number&#39; maxlength=&#39;3&#39; 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=&#39;true&#39;>
    <image class="imgAdd" src="{{disabledMax ? &#39;/images/icon/ic_add_grey.png&#39; : &#39;/images/icon/ic_add.png&#39;}}"></image>
  </button></view>

4. Code in JSON

.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;}

Das obige ist der detaillierte Inhalt vonImplementierung kundenspezifischer Komponenten des Miniprogramms (Fallanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn