如何在微信小程序中使用下拉框组件

这篇文章将为大家详细讲解有关如何在微信小程序中使用下拉框组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

适用场景

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

一、省市三级联动使用

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

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

二、出生日期选择

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

<pickermode="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">
<viewclass="picker">
{{date}}
</view>
</picker>

三、性别选择

注意，不填mode默认为selector，range=”一维数组”，value=”当前选中索引”

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

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

//.js
varapp=getApp();

data:{

region:['河北','沧州','河间'],
date:'2010-10-10',
gender:['男','女'],
index:0
},

bindViewEvent:function(e){

app.process(this,e);
}

相关js类

//component.js
constselect=require('../component/select.js');
constupload=require('../component/upload.js');

classcomponent{

constructor(com,that){

this.com=com;
this.that=that;
}

//绑定下拉框选择事件
bindSelect(data){

letself=this;

letmode=data.currentTarget.dataset.mode;

letname=data.currentTarget.dataset.name;

letpicker=newselect({
that:self.that,
mode:mode,
name:name
});

picker.change(data.detail.value);
}

//点击事件，传递参数为e.currentTarget.dataset
bindImageChoose(data){

//图片上传
this.uploader=newupload({
that:that,
name:data.name,
mode:data.mode,
count:data.count||9
});

this.uploader.choose();
}

bindImageDel(data){

//图片上传
this.uploader=newupload({
that:that,
name:data.name,
mode:data.mode,
count:data.count||9
});

this.uploader.del(data.index);
}

}
module.exports=component;


//select.js
/*
*下拉框对象
*/
classpicker{

constructor(data){

this.that=data.that;
this.name=data.name||'date';
this.mode=data.mode||'selector';
}

show(name,data){

letview={};
view[name]=data;

this.that.setData(view);
}

change(data){

letself=this;

self.show(self.name,data);
}
}
module.exports=picker;

//upload.js
classpicUploader{

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(){

constself=this;

wx.chooseImage({
count:(self.count-self.that.data[self.name].length),
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
vartempFilePaths=res.tempFilePaths;

self.append(tempFilePaths);
}
})
}

/*
*显示图片
*/

show(){

letself=this;
letview={};
view[self.name]=self.that.data[self.name];

self.that.setData(view);

}

/*
*追加图片
*/
append(data){

constself=this;
for(leti=0;i<data.length;i++){

self.that.data[self.name].push(data[i]);
}

self.show();
}

/*
*删除图片
*/
del(index){

letself=this;

self.that.data[self.name].splice(index,1);

self.show();
}


}
module.exports=picUploader;

关于如何在微信小程序中使用下拉框组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。