微信小程序下拉框组件使用方法

适用场景

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;

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