社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
一、使用自訂元件的方式
1、js檔案中：
2 、json檔案中：
3、wxml檔中：
一、自訂元件的定義
1、 對外提供的自訂屬性值
2 , 元件內部使用的資料
3、增加數量方法
4、減少數量
5、手動輸入數量
6、失去焦點
附自訂元件的全部程式碼
1、js中的程式碼
2、wxml中的程式碼
3、 wxss中的程式碼
4、json中的程式碼
首頁 微信小程式 小程式開發 小程式自訂元件的實作（案例解析）

小程式自訂元件的實作（案例解析）

不言
Sep 18, 2018 pm 04:36 PM
購物車

這篇文章帶給大家的內容是關於小程式自訂元件的實作（案例解析），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

本文將結合案例，來闡述自訂元件實作。
先來上圖
小程式自訂元件的實作（案例解析）

這個是一個購物車的數量組件。主要思路：
 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(&#39;optionNum&#39;, { 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(&#39;optionNum&#39;,{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(&#39;optionNum&#39;, { 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(&#39;optionNum&#39;, { 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(&#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
    }
  }
})
登入後複製

2、wxml中的程式碼

<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>
登入後複製

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": {}}
登入後複製
#

以上是小程式自訂元件的實作（案例解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前 By DDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7314
9
Java教學
1625
14
CakePHP 教程
1348
46
Laravel 教程
1260
25
PHP教程
1207
29
顯示更多
Related knowledge
Java中如何實作一個簡單的購物車功能？ Java中如何實作一個簡單的購物車功能？ Nov 02, 2023 am 11:56 AM

Java中如何實作一個簡單的購物車功能？

PHP實作購物車功能 PHP實作購物車功能 Jun 22, 2023 am 09:00 AM

PHP實作購物車功能

PHP商城開發技巧：設計購物車與訂單同步功能 PHP商城開發技巧：設計購物車與訂單同步功能 Jul 30, 2023 pm 07:22 PM

PHP商城開發技巧：設計購物車與訂單同步功能

如何利用Redis和JavaScript實現購物車功能 如何利用Redis和JavaScript實現購物車功能 Sep 21, 2023 pm 01:27 PM

如何利用Redis和JavaScript實現購物車功能

如何在MySQL中設計商城的購物車錶結構？ 如何在MySQL中設計商城的購物車錶結構？ Oct 30, 2023 pm 02:12 PM

如何在MySQL中設計商城的購物車錶結構？

如何使用PHP實現一個簡單的購物車功能 如何使用PHP實現一個簡單的購物車功能 Sep 24, 2023 am 09:13 AM

如何使用PHP實現一個簡單的購物車功能

實戰教學：PHP與MySQL實作購物車功能詳解 實戰教學：PHP與MySQL實作購物車功能詳解 Mar 15, 2024 pm 12:27 PM

實戰教學：PHP與MySQL實作購物車功能詳解

如何實現購物車數量提醒功能的Java開關買菜系統 如何實現購物車數量提醒功能的Java開關買菜系統 Nov 04, 2023 am 09:03 AM

如何實現購物車數量提醒功能的Java開關買菜系統

See all articles