从不同方面看小程序下拉菜单

发布时间：2023-05-18

一、小程序下拉菜单组件

微信小程序提供了一个非常方便的组件"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事件来响应用户的选择。当用户选择了一个选项之后，我们可以在事件处理函数中获取选项的值，并根据这个值来更新页面的内容。

推荐文章