從不同方面看小程序下拉菜單

一、小程序下拉菜單組件

微信小程序提供了一個非常方便的組件”picker”（選擇器）。我們可以使用picker來創建一個下拉菜單，下面是一個簡單的例子：

  <view class="container">
    <picker bindchange="pickerChange">
      <view class="picker">
        當季水果：{{pickerItems[selected]}}
      </view>
      <view class="picker-icon">
        <image src="/images/arrow-down.png" />
      </view>
      <view class="picker-mask">
    </picker>
  </view>

其中，picker-items是一個數組，用來存儲下拉菜單中的選項；selected是一個整數型變數，用來存儲當前選中的選項的索引。picker-change事件會在用戶選擇選項的時候被調用，我們可以在事件處理函數中獲取用戶選擇的選項的索引。

二、小程序實現下拉菜單

使用picker組件實現下拉菜單非常簡單。首先需要定義一個picker-items數組，然後使用picker組件來展示這個數組中的所有選項。當用戶選擇了一個選項，我們就可以觸發picker-change事件，把選項的值賦值給一個變數，再根據這個變數的值來展示相應的內容。

  // 頁面的js文件中
  Page({
    data: {
      pickerItems: ['蘋果', '香蕉', '橙子', '芒果'],
      selected: 0,
      fruitImage: '/images/apple.png'
    },
    pickerChange: function(e) {
      var index = e.detail.value;
      var imageName = '/images/' + this.data.pickerItems[index] + '.png';
      this.setData({
        selected: index,
        fruitImage: imageName
      });
    }
  });

上面的代碼演示了如果實現一個根據用戶選擇的選項來展示相應內容的下拉菜單。當用戶選擇一個選項之後，在picker-change事件中會根據選項的值來拼接一個圖片文件名，然後用setData函數把圖片的地址賦值給fruitImage變數，這樣頁面上的圖片就會動態切換成用戶選擇的水果的圖片。

三、小程序下拉菜單傳值

下拉菜單的選項值也可以傳遞給其他頁面或組件，例如我們可以在一個頁面中創建一個下拉菜單，讓用戶選擇一種水果，在另一個頁面中展示用戶選擇的水果的詳細信息。

  // 頁面A的js文件中
  Page({
    data: {
      pickerItems: ['蘋果', '香蕉', '橙子', '芒果'],
      selected: 0
    },
    pickerChange: function(e) {
      var index = e.detail.value;
      wx.navigateTo({
        url: '/pages/B/B?fruitType=' + this.data.pickerItems[index]
      });
    }
  });

  // 頁面B的js文件中
  Page({
    data: {
      fruitType: ''
    },
    onLoad: function(options) {
      this.setData({
        fruitType: options.fruitType
      });
    }
  });

在頁面A中，我們實現了一個下拉菜單，並在事件處理函數picker-change中使用wx.navigateTo函數跳轉到頁面B。在跳轉的時候，我們把選中的水果類型作為參數傳遞給頁面B。頁面B中，我們使用onLoad函數來獲取這個參數，並將它保存在data對象中，然後在頁面上展示。

四、小程序下拉菜單自動填充

有時候我們需要在下拉列表中自動填充一些選項，以便用戶可以更快地選擇。

  // 頁面的js文件中
  Page({
    data: {
      pickerItems: ['蘋果', '香蕉', '橙子', '芒果'],
      selected: 0,
      quickFill: ['椰子', '哈密瓜', '櫻桃', '李子']
    },
    pickerChange: function(e) {
      var index = e.detail.value;
      this.setData({
        selected: index
      });
    },
    onTap: function(e) {
      var index = e.currentTarget.dataset.index;
      this.setData({
        selected: index
      });
    }
  });

上面的代碼演示了如何在下拉菜單旁邊增加一些快速填充的選項。我們使用了一個quickFill數組，把幾個選項隨機展示在頁面上。當用戶點擊一個快速填充選項的時候，我們使用onTap事件去修改下拉菜單的值。

五、微信小程序select下拉列表選取

除了使用picker組件，我們還可以使用基本的HTML元素select來實現下拉菜單的功能。

  <select bindchange="onSelect">
    <option value="apple">蘋果
    <option value="banana">香蕉
    <option value="orange">橙子
    <option value="mango">芒果
  </select>

上面的代碼演示了如何使用HTML的select標籤來創建一個下拉菜單。我們使用了bindchange事件來響應用戶的選擇。當用戶選擇了一個選項之後，我們可以在事件處理函數中獲取選項的值，並根據這個值來更新頁面的內容。