微信小程序picker-view樣式層次踩坑記錄

picker-view適用範圍

在小程序的開發中，有些時候需要用到下拉列表，一般情況下直接用微信現成的 picker組件已經可以滿足，但是需要用到交互式下拉列表或者需要自定義列表樣式的時候picker組件就不給力了，這時候就需要用picker-view組件自己定義下路列表及交互邏輯。
就像下面的例子中，第二列的選項是根據第一列的選項動態改變的。

一個簡單的例子

picker-view真是不用不知道，一用嚇一跳，文檔裏寫得不夠清晰，demo也是過於簡單，連個遮罩層都沒有。
下面是本人記錄的一個簡單運用例子。

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的style

picker-view的style作用在最低層。把該層調成紅色後效果如下。

    <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

這個比較好理解，就是下拉列表中的其中一列，它顯示在倒數第二層。
把該層的背景調成紅色後效果如下（picker-view的背景色爲白色）

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

picker-view的mask-style

mask-style和mask-class作用的地方都是一樣的，這裏就不分開敘述了。它們作用在上圖中你看到的那個白色半透明層，堆疊順序在倒數第三層。將該層
調成半透明綠色後效果如下（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

indicator-style和indicator-class作用的地方都是一樣的，這裏就不分開敘述了。它們作用在選中區，顯示在最頂層。將該層設置爲半透明綠色後效果如下（picker-view-column背景色依然是紅色）

    <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>

總結

至此，picker-view的樣式層次從低到頂依次爲：picker-view的style, picker-view-column的style, picker-view的mask-style, picker-view的indicator-style。