### [微信小程序下拉框组件使用方法](https://www.prosaas.cn/article/16996)

**Published:** 2019-01-21T05:44:27

**Author:** 5201314

**Excerpt:** 这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法，写的十分的全面细致，具有一定的参考价值，对此有需要…

这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。【推荐教程：小程序开发教程】

适用场景

1、省市三级联动  
2、出生日期选择  
3、性别选择  
4、一般性的下拉选择等

**一、省市三级联动使用**

注意mode = region，以及value = “一维数组”

//.wxml
<picker mode="region" bindchange="bindViewEvent" data-model="component"
data-method="bindSelect" data-name="region" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
   当前选择：{{region\[0\]}}，{{region\[1\]}}，{{region\[2\]}}
</view>
</picker>

**二、出生日期选择**

注意mode = date，以及value = “日期字符串”

<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindViewEvent" data-model="component" data-method="bindSelect" date-mode="date" data-name="date">
  <view class="picker">
  {{date}}
  </view>

**三、性别选择**

<picker bindchange="bindViewEvent" data-model="component" data-method="bindSelect" data-name="index" value='{{index}}' range="{{gender}}">
  <view class="label-right">
    {{gender\[index\]}}
  </view>
</picker>

以上都需要在.js里设置相关初始变量！

var app = getApp();
 data: {
  region:\['湖南','长沙','岳麓'\],
  date:'2010-10-10',
  gender:\['男','女'\],
  index:0
 }
 bindViewEvent:function(e){
  app.process(this,e);  
 }

相关js类

//component.js
const select = require('../component/select.js');
const upload = require('../component/upload.js');
class component{
 constructor(com, that) {
  this.com = com;
  this.that = that;
 }
 //绑定下拉框选择事件
 bindSelect(data){
  let self = this;
  let mode = data.currentTarget.dataset.mode;
  let name = data.currentTarget.dataset.name;
  let picker = new select({
   that: self.that,
   mode: mode,
   name: name
  });
  picker.change(data.detail.value);
 }
 //点击事件，传递参数为e.currentTarget.dataset
 bindImageChoose(data){
  //图片上传
  this.uploader = new upload({
   that: that,
   name: data.name,
   mode: data.mode,
   count: data.count || 9
  });
  this.uploader.choose();
 }
 bindImageDel(data){
  //图片上传
  this.uploader = new upload({
   that: that,
   name: data.name,
   mode: data.mode,
   count: data.count || 9
  });
  this.uploader.del(data.index);
 }
}
module.exports = component;
//select.js
/\*
\* 下拉框对象
\*/
class picker{
 constructor(data){
  this.that = data.that;
  this.name = data.name || 'date';
  this.mode = data.mode || 'selector';
 }
 show(name,data){
  let view = {};
  view\[name\] = data;
  this.that.setData(view);
 }
 change(data){
  let self = this;
  self.show(self.name, data);
 }
}
module.exports = picker;
//upload.js
class picUploader {
 constructor(data) {
  this.that = data.that;
  this.name = data.name;
  this.mode = data.mode || 1;
  this.count = this.model == 1 ? 1 : data.count || 9;
 }
 /\*
 \* 选择图片
 \*/
 choose() {
  const self = this;
  wx.chooseImage({
   count: (self.count - self.that.data\[self.name\].length),
   sizeType: \['original', 'compressed'\],
   sourceType: \['album', 'camera'\],
   success: function (res) {
    var tempFilePaths = res.tempFilePaths;
    self.append(tempFilePaths);
   }
  })
 }
 /\*
 \* 显示图片
 \*/
 show() {
  let self = this;
  let view = {};
  view\[self.name\] = self.that.data\[self.name\];
  self.that.setData(view);
 }
 /\*
 \* 追加图片
 \*/
 append(data) {
  const self = this;
  for (let i = 0; i < data.length; i++) {
   self.that.data\[self.name\].push(data\[i\]);
  }
  self.show();
 }
 /\*
 \* 删除图片
 \*/
 del(index) {
  let self = this;
  self.that.data\[self.name\].splice(index, 1);
  self.show();
 }
}
module.exports = picUploader;

以上就是微信小程序下拉框组件使用方法的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** date, JS, 字符串, 微信小程序

**Categories:** 后端开发

---