マイクロチャネル選択アプレットドロップダウンボックスアセンブリ

まず、送信元アドレス

https://github.com/imxiaoer/WeChatMiniSelect

第二に、図の効果。

悪い記録画面の画質、私たちはぼかし（Wulian）が表示されます

元の第三に、コンポーネント

1. select.wxml

< ビュークラスは= "選択ボックス" > 
  < ビュークラス= "を選択し、現在の" catchtap = "openClose" > 
    < テキストクラス= "現在の名" > {{current.name}} </ テキスト> 
  </ ビュー> 
  < ビュークラス= "オプションリスト" WX：もし= "{{isShow}}" catchtap = "optionTap" > 
    < テキストクラス= "オプション" 
      データID = "{{defaultOption.id}}"
      データ名= "{{defaultOption.name}}" >{{defaultOption.name}}
     </ テキスト> 
    < テキストクラス= "オプション" 
      WXのための：= "{{結果}}" 
      WX：キー= "{{item.id}}" 
      データID = "{{アイテム.ID}}」
      データ名= "{{item.name}}" > {{item.name}}
     </ テキスト> 
  </ ビュー> 
</ ビュー>

説明：bindtapのないcatchtapは選択し[閉じる]をクリックし、ページの残りの部分を達成するために、バブリングからイベントを防ぐためのものですので、親ページ（index.wxml）バブリングを停止しない場合は、最も外側、bindtap =「クローズ」メソッドを拘束親コンポーネントを閉じます実行する方法

2. select.js

成分（{ 
  特性：{ 
    オプション：{ 
      型：Array、
      値：[] 
    }、
    defaultOption：{ 
      タイプ：オブジェクト、
      値：{ 
        ID： '000' 、
        名称： '全部城市' 
      } 
    }、
    キー：{ 
      タイプ：文字列、
      値： 'ID' 
    }、
    テキスト：{ 
      タイプ：文字列
      値： '名前' 
    } 
  }、
  データ：{ 
    結果：[]、
    isShow：偽、
    現在の：{} 
  }、 
  メソッド：{
    optionTap（E）{
      DataSetがLETは = e.target.dataset
       この.setData（{ 
        電流：DataSetを、
        isShow：falseに
      }）; 

      // 渡す親コンポーネントメソッド、およびパラメータを呼び出し
      、この .triggerEvent（ "変更" 、データセット{...}）
    }、
    OpenClose（）{ 
      この.setData（{ 
        isShow： ！この.data.isShow 
      }）
    } 

    // この方法は、親コンポーネントに呼び出される
    クローズ（）{
       この.setData（{ 
        isShow：偽へ
      }）
    } 
  }、 
  ライフタイム：{
    添付の（）{ 
      //名前の変換属性、そうでない場合は、{ID： ''、名前： ''} ''、名前：フォーマットが{IDに変換される ''} を形成 
      LET結果= []
       IF（この .DATA ！.KEY == 'ID' || この .data.text == '名前'！）{       
         のための（LET項目この.data.options）{ 
          letの{[ この .data.key]：ID、[ この。 data.text]：名=} アイテム
          result.push（{ID、名前}）
        } 
      } 
      この.setData（{ 
        電流：Object.assign（{}、この.data.defaultOption）
        結果：結果
      }）
    } 
  } 
}）

説明：キーとテキストのプロパティは、変換属性名を作るために。たとえば、次のように私は今のデータが構成されています。

[{ 
      CITY_ID： '001' 、
      CITY_NAME： '北京' 
    }、{ 
      CITY_ID： '002' 、
      CITY_NAME： '上海' 
    }、{ 
      CITY_ID： '003' 、
      CITY_NAME： '深' 
 }]

データ構造が必要とされているコンポーネントを選択します。

[{ 
      上記ID： '001' 、
      名称： '北京' 
    }、{ 
      上記ID： '002'は、
      名称： '上海' 
    }、{ 
      上記ID述べた '003' 、
      名称： '深'を
}]

だから我々は、IDに変換CITY_IDするつもりだ、CITY_NAMEは名前に変換します。コンバージョンを達成するためにどのようにそれを属性名？これは、これら2つのパラメータのキーとテキストを介して行われます。

3. select.json

{
   "コンポーネント"：真、
   "usingComponents" ：{} 
}

4. select.wxss

.selectボックス { 
  位置：相対。
  幅：100％ ; 
  フォントサイズ：30rpx。
} 

.select電流 { 
  位置：相対。
  幅：100％ ; 
  パディング：0 10rpx。
  行の高さ：70rpx。
  ボーダー：1rpx固体#ddd。
  国境半径：6rpx。
  ボックスサイズ：ボーダーボックス ; 
}

後.select電流:: { 
  位置：絶対。
  表示：ブロック ; 
  右：16rpx。
  トップ：30rpx。
  内容：'' ; 
  幅：0 ; 
  高さ：0 ; 
  ボーダー：10rpx固体透明。
  border-top：10rpx固体＃999 ; 
} 

.current名 { 
  表示：ブロック。
  幅：85％ 。
  高さ：100％ ; 
  ワードラップ：ノーマル ; 
  オーバーフロー：隠されました ; 
} 

.OPTIONリスト { 
  位置：絶対。
  左：0 ; 
  トップ：76rpx。
  幅：100％ ; 
  パディング：12rpx 20rpx 10rpx 20rpx。
  国境半径：6rpx。
  ボックスサイズ：ボーダーボックス ; 
  Zインデックス：99 ; 
  ボックスシャドウ：0rpx 0rpx 1rpx 1rpx RGBA（0、0、0、0.2）インセット。
  背景色：#FFF ; 
} 

.OPTION { 
  表示：ブロック。
  幅：100％ ; 
  行の高さ：70rpx。
  border-bottom：1rpx固体#eee。
} 

.OPTION：最後の子 { 
  ボーダー底：なし。
  パディングボトム：0 ; 
}

第四に、コンポーネントの使用

index.wxml

< ビュークラス= "コンテナ" bindtap = "クローズ" > 
  < ビュークラス= "選択ラップを" > 
    < 選択ID = "選択" オプション= "{{オプション}}" キー= "CITY_ID" テキスト= "CITY_NAME" バインド：変更= "変更" > </ 選択> 
  </ ビュー> 
</ ビュー>

マイクロチャネル選択アプレットドロップダウンボックスアセンブリ

おすすめ