スコープピッカービュー

小さなプログラムの開発では、時々、通常の状況下では既製のマイクロチャネルを直接使用、ドロップダウンリストを使用する必要があるpickerアセンブリが満たすために持っていますが、使用する必要インタラクティブドロップダウンリストをか必要とカスタムリストのスタイルをする場合picker、アセンブリが強制することはありません今回は必要なpicker-view定義とリスト道の相互作用ロジックコンポーネント自身を。
次の例のように、第2の列オプションオプションが動的に最初の列に応じて変更されます。
ここに画像を挿入説明

簡単な例

picker-view本当に驚いて、書かれた文書で明らかに十分ではありません、知りませんが、デモは単純すぎるではなく、さらにマスク層です。
ここに私のレコードの使用の簡単な例です。
ここに画像を挿入説明
Test.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    fruits:['香蕉','草莓','苹果','橙子'],
    selectedIdx:0,
    showSelector:true
  },
})

Test.wxml

<!--pages/Test/Test.wxml-->
<view style="width:100%;height:100%;">
  <text>HelloWorld</text>
  <!--Selector遮罩-->
  <view wx:if="{{showSelector}}" 
    style='position:absolute;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);left:0px;top:0px;z-index:99'>
    <!--Banner-->
    <view style='width:100%;background:white;height:30px;bottom:45%;position:absolute'>
      <view class='pickerBanner' style='left:10px;text-align:left'>取消</view>
      <view class='pickerBanner'>选择水果</view>
      <view class='pickerBanner' style='right:10px;text-align:right'>确定</view>
    </view>
    <!--Picker-->
    <picker-view
      indicator-style="height: 50px;"
      style="width: 100%; height: 45%;position:absolute;bottom:0px;text-align:center;background:white"
      value="{{selectedIdx}}">
      <!--Columns-->
      <picker-view-column>
        <view wx:for="{{fruits}}" wx:for-index="index">{{item}}</view>
      </picker-view-column>
    </picker-view>
  </view>
</view>

Test.wxss

/* pages/Test/Test.wxss */
page{
  width:100%;
  height:100%;
}
.pickerBanner{
  position: relative;
  line-height: 30px;
  float:left;
  width:33%;
  text-align: center;
}

スタイル階層

上記の例は非常に単純で、ドロップダウンリストとマスク層です。実際には、picker-viewいくつかから構成され<view>、この領域内のドキュメントに記載され、形成されたスタックの構成要素曖昧です。
以下はに関するマイクロチャネルの文書であるpicker-viewいくつかの追加の説明が明確ではありません。

ピッカービュー的なスタイル

picker-view最下位レベルのスタイルのアクション。層の後に赤、次のような効果に転送されます。

    <picker-view
      indicator-style="height: 50px;"
      style="width: 100%; height: 45%;position:absolute;bottom:0px;text-align:center;background:red"
      value="{{selectedIdx}}">
      <!--Columns-->
    </picker-view>

ここに画像を挿入説明

ピッカービュー列

これは、より良い最後から二番目の層に表示されるドロップダウンリストであり、これは、理解されています。
赤色層の背景トーンの後に次のような効果（ピッカービューの背景色が白です）

      <picker-view-column>
        <view wx:for="{{fruits}}" wx:for-index="index" style="background:red">{{item}}</view>
      </picker-view-column>

ここに画像を挿入説明

ピッカービュー的マスクスタイル

ローカルマスクスタイルとマスククラスのアクションは、個別に説明がない、同じです。もし上記の画像におけるそれらの役割は、逆数の積層順にその白い半透明の層、第三層を見ることができます。層
次のような効果に半透明のグリーントーン（ピッカービュー列の背景色が赤のままです）

    <!--Picker-->
    <picker-view
      indicator-style="height: 50px;"
      mask-style="background:rgba(0, 255, 0, 0.7)"
      style="width: 100%; height: 45%;position:absolute;bottom:0px;text-align:center;background:white"
      value="{{selectedIdx}}">
      <!--Columns-->
      <picker-view-column>
        <view wx:for="{{fruits}}" wx:for-index="index" style="background:red">{{item}}</view>
      </picker-view-column>
    </picker-view>

ここに画像を挿入説明

ピッカービュー的指標スタイル

ローカルインジケータスタイルとインジケータクラスのアクションが同じで、別途説明がありません。選択した領域での彼らの役割は、トップレベルで表示されます。半透明の緑色層は次のような効果（ピッカービュー列の背景色が赤のままである）の後に設けられています。

    <picker-view
      indicator-style="height: 50px;background:rgba(0, 255, 0, 0.7)"
      style="width: 100%; height: 45%;position:absolute;bottom:0px;text-align:center;background:white"
      value="{{selectedIdx}}">
      <!--Columns-->
      <picker-view-column>
        <view wx:for="{{fruits}}" wx:for-index="index" style="background:red">{{item}}</view>
      </picker-view-column>
    </picker-view>