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

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

适用场景

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 >
二、出生日期选择
注意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 >
三、性别选择
 picker bindchange= bindViewEvent data-model= component data-method= bindSelect data-name= index value= #39;{{index}} #39; range= {{gender}} 
 view >
以上都需要在.js里设置相关初始变量！
var app = getApp();
 data: {
 region:[ #39;湖南 #39;, #39;长沙 #39;, #39;岳麓 #39;],
 date: #39;2010-10-10 #39;,
 gender:[ #39;男 #39;, #39;女 #39;],
 index:0
 bindViewEvent:function(e){
 app.process(this,e); 
 }
相关js类
//component.js
const select = require( #39;../component/select.js #39;);
const upload = require( #39;../component/upload.js #39;);
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 || #39;date #39;;
 this.mode = data.mode || #39;selector #39;;
 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: [ #39;original #39;, #39;compressed #39;],
 sourceType: [ #39;album #39;, #39;camera #39;],
 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;
 
以上就是微信小程序下拉框组件使用方法的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！